2 replies [Last post]
gary4u
gary4u's picture
Offline
newbie
India
Last seen: 3 days 8 hours ago
India
Timezone: GMT+5.5
Joined: 2018-12-31
Posts: 7
Points: 12

Hi,

I am uploading images thru php to my gallery on my webpage - http://mytrade.myconnect.in/ , The images are overlapping each other can any one please help me in this regard.

Below is the CSS I am using for the gallery.

.card {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid rgba(0,0,0,.125);
border-radius: .25rem;
}

.card-body {
-ms-flex: 1 1 auto;
flex: 1 1 auto;
padding: 1.25rem;
}

.card-title {
margin-bottom: .75rem;
}

.card-subtitle {
margin-top: -.375rem;
margin-bottom: 0;
}

.card-text:last-child {
margin-bottom: 0;
}

.card-link:hover {
text-decoration: none;
}

.card-link+.card-link {
margin-left: 1.25rem;
}

.card>.list-group:first-child .list-group-item:first-child {
border-top-left-radius: .25rem;
border-top-right-radius: .25rem;
}

.card>.list-group:last-child .list-group-item:last-child {
border-bottom-right-radius: .25rem;
border-bottom-left-radius: .25rem;
}

.card-header {
padding: .75rem 1.25rem;
margin-bottom: 0;
background-color: rgba(0,0,0,.03);
border-bottom: 1px solid rgba(0,0,0,.125);
}

.card-header:first-child {
border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0;
}

.card-footer {
padding: .75rem 1.25rem;
background-color: rgba(0,0,0,.03);
border-top: 1px solid rgba(0,0,0,.125);
}

.card-footer:last-child {
border-radius: 0 0 calc(.25rem - 1px) calc(.25rem - 1px);
}

.card-header-tabs {
margin-right: -.625rem;
margin-bottom: -.75rem;
margin-left: -.625rem;
border-bottom: 0;
}

.card-header-pills {
margin-right: -.625rem;
margin-left: -.625rem;
}

.card-img-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 1.25rem;
}

.card-img {
width: 100%;
border-radius: calc(.25rem - 1px);
}

.card-img-top {
width: 100%;
border-top-left-radius: calc(.25rem - 1px);
border-top-right-radius: calc(.25rem - 1px);
}

.card-img-bottom {
width: 100%;
border-bottom-right-radius: calc(.25rem - 1px);
border-bottom-left-radius: calc(.25rem - 1px);
}

@media (min-width:576px) {
.card-deck {
display: -ms-flexbox;
display: flex;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
margin-right: -15px;
margin-left: -15px;
}

.card-deck .card {
display: -ms-flexbox;
display: flex;
-ms-flex: 1 0 0%;
flex: 1 0 0%;
-ms-flex-direction: column;
flex-direction: column;
margin-right: 15px;
margin-left: 15px;
}
}

@media (min-width:576px) {
.card-group {
display: -ms-flexbox;
display: flex;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
}

.card-group .card {
-ms-flex: 1 0 0%;
flex: 1 0 0%;
}

.card-group .card+.card {
margin-left: 0;
border-left: 0;
}

.card-group .card:first-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}

.card-group .card:first-child .card-img-top {
border-top-right-radius: 0;
}

.card-group .card:first-child .card-img-bottom {
border-bottom-right-radius: 0;
}

.card-group .card:last-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}

.card-group .card:last-child .card-img-top {
border-top-left-radius: 0;
}

.card-group .card:last-child .card-img-bottom {
border-bottom-left-radius: 0;
}

.card-group .card:not(:first-child):not(:last-child) {
border-radius: 0;
}

.card-group .card:not(:first-child):not(:last-child) .card-img-bottom,.card-group .card:not(:first-child):not(:last-child) .card-img-top {
border-radius: 0;
}
}

.card-columns .card {
margin-bottom: .75rem;
}

@media (min-width:576px) {
.card-columns {
-webkit-column-count: 4;
column-count: 4;
-webkit-column-gap: 1.25rem;
column-gap: 1.25rem;
}

.card-columns .card {
display: inline-block;
width: 100%;
}
}

@media only screen and (min-width : 1224px) {

.card-columns {
-webkit-column-count: 4;
column-count: 4;
-webkit-column-gap: 1.25rem;
column-gap: 1.25rem;
}

.card-columns .card {
display: inline-block;
width: 100%;
}

}

@media screen and (min-width : 1824px) {

.card-columns {
-webkit-column-count: 4;
column-count: 4;
-webkit-column-gap: 1.25rem;
column-gap: 1.25rem;
}

.card-columns .card {
display: inline-block;
width: 100%;
}

}

@media screen and (min-width: 600px) and (max-width: 900px) {
#content {background:#ffffff;}

.card-columns {
-webkit-column-count: 4;
column-count: 4;
-webkit-column-gap: 1.25rem;
column-gap: 1.25rem;
}

.card-columns .card {
display: inline-block;
width: 100%;
}

}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
#content {background:#ffffff;}

.card-columns {
-webkit-column-count: 4;
column-count: 4;
-webkit-column-gap: 1.25rem;
column-gap: 1.25rem;
}

.card-columns .card {
display: inline-block;
width: 100%;
}

}

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 8 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9723
Points: 3802

A gallery is a list

So start with markup that names the elements for what they are.

I've included a sample gallery page for you to see what I'm talking about. The test case is automagically responsive with no additional styling.

<!DOCTYPE HTML>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta content=
	    "width=device-width, height=device-height, initial-scale=1"
            name="viewport">
 
    <title>
      Test document
    </title>
 
    <style type="text/css">
    /*<![CDATA[*/
 
    body {
	background-color: white;
	color: black;
	font: 100%/1.5 sans-serif;
	margin: 0;
	padding: 1em;
    }
 
    p {
	font-size: 1em;
    }
 
    #wrapper {
	margin: 0 auto;
	max-width: 65em;
    }
 
    h1 {
	font-family: serif;
	margin-bottom: 0;
	text-align: center;
    }
 
    /* end boilerplate */
 
    ul#gallery {
	list-style-type: none;
	padding: 0;
	text-align: center;
    }
 
    #gallery li {
	display: inline-block;
	width: 15em;
    }
 
    figure {
	margin: 0;
    }
 
    #gallery img {
	width: 90%;
	}
 
    /*]]>*/
    </style>
  </head>
  <body>
    <div id="wrapper">
      <h1>Gallery Example</h1>
 
      <ul id="gallery">
	<li>
	  <figure>
	    <img src="http://mytrade.myconnect.in/admin/gallery/126+1jpg"
		    alt="">
	    <figcaption>
	      Garbanzos
	    </figcaption>
	  </figure>
	</li>
 
	<li>
	  <figure>
	    <img src="http://mytrade.myconnect.in/admin/gallery/120+1jpg"
		    alt="">
 
	    <figcaption>
	      Bay Leaves
	    </figcaption>
	  </figure>
	</li>
 
	<li>
	  <figure>
	    <img src="http://mytrade.myconnect.in/admin/gallery/125+1jpg"
		    alt="">
 
	    <figcaption>
	      Cashews
	    </figcaption>
	  </figure>
	</li>
 
	<li>
	  <figure>
	    <img src="http://mytrade.myconnect.in/admin/gallery/122+1jpg"
		    alt="">
 
	    <figcaption>
	      Raisins
	    </figcaption>
	  </figure>
	</li>
 
	<li>
	  <figure>
	    <img src="http://mytrade.myconnect.in/admin/gallery/125+1jpg"
		    alt="">
 
	    <figcaption>
	      Cashews
	    </figcaption>
	  </figure>
	</li>
 
	<li>
	  <figure>
	    <img src="http://mytrade.myconnect.in/admin/gallery/121+1png"
		    alt="">
 
	    <figcaption>
	      Spanish Roast Coffee
	    </figcaption>
	  </figure>
	</li>
 
	<li>
	  <figure>
	    <img src="http://mytrade.myconnect.in/admin/gallery/125+1jpg"
		    alt="">
 
	    <figcaption>
	      Cashews
	    </figcaption>
	  </figure>
	</li>
      </ul>
    </div>
  </body>
</html>

Ask if something doesn't look right to you. I'm doing this at 4AM local, so may not be the sharpest tack in the bag.

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gary4u
gary4u's picture
Offline
newbie
India
Last seen: 3 days 8 hours ago
India
Timezone: GMT+5.5
Joined: 2018-12-31
Posts: 7
Points: 12

THANK YOU-Regarding Gallery images for desktop and mobile-

HI,

Thank you so much for the help I needed. The CSS It has worked. Just needed to change the wrapper - max-width: 75em;

Thank you once again. This has made my day.

Thanks
Gary.J.Saunders
gary.myconnect.in
India