How to expand background image(in my gallery section) so that it covers all its contents(all pics in gallery sections)?

Here is my code link:

Any help is appreciated.

Hmmm…well I guess you could pop this ul under the gallery class. You’ll probably have to fiddle with some media queries to make sure it looks good in different screen widths.

.gallery{
  list-style:none;
  clear:both;
}
ul {
  margin-left: 100px;
}

thanks for looking into it…I tried the above code but it’s still not working.How to fiddle media queries…i mean like what?

Don’t float the <li> elements. Instead make them as inline-blocks.

So, your new code would look something like this: (on line #91 currently)

ul.gallery li {
  /* remove the float! */
  /* 	float: left; */
  display: inline-block;
  padding: 10px 10px 25px 10px;
  background: #eee;
  border: 1px solid #fff;
  -moz-box-shadow: 0px 2px 15px #333;
  position:relative ;
}

You can remove the margin 100px margin that you added earlier.

Floating the elements means that they don’t take up the space in the normal flow, so the parent element will not add the heights of it’s floated childs into it’s own height.

1 Like

thanks a lot :smiley::smiley:

Little word of advice - there is an inordinate amount of imagery on your product page. If you like that aesthetic then happy days, however, take the time to consider (for the future) the impact of using numerous, seemingly uncompressed image files might have on you and the end user - especially on factors like page load times, data usage and accessibility for people who are sight disabled.

Just thought I’d mention it as it struck me when I looked at your project. Good luck with your learning :slight_smile:

1 Like

Ok thanks a lot for your advice.I will surely consider the above in my later work.