Regarding Gallery images for desktop and mobile

2 replies [Last post]

Thu, 2019-01-31 22:12

gary4u

Offline

Regular

India

Last seen: 2 years 41 weeks ago

India

Timezone: GMT+5.5

Joined: 2018-12-31

Posts: 18

Points: 27

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%;
}

}

Tags:

CSS Layouts

Fri, 2019-02-01 10:01

gary.turner

Offline

Moderator

Dallas

Last seen: 2 years 3 weeks ago

Dallas

Timezone: GMT-6

Joined: 2004-06-25

Posts: 9776

Points: 3858

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.

Fri, 2019-02-01 16:19

gary4u

Offline

Regular

India

Last seen: 2 years 41 weeks ago

India

Timezone: GMT+5.5

Joined: 2018-12-31

Posts: 18

Points: 27

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

Regarding Gallery images for desktop and mobile

A gallery is a list

THANK YOU-Regarding Gallery images for desktop and mobile-

User login

Navigation