extend image grid to full width WordPress
- SOLVED
Hello,
Make image grid extend to full width and still be responsive on mobile screen.
The [[LINK href="http://www.carolinecollective.cc"]]site[[/LINK]].
I have a few projects on the burner; your help will save a few minutes of tweaking the css. Thank you.
Answers (3)
Daniel Yoen answers:
try to put
.col-full.flexslider{max-width: 100% !important;}
at the bottom of style.css file
hope this help :-)
Creativira comments:
Daniel, you're a Rockstar! :)
Thank you! You've earned my votes.
Luis Abarca answers:
Use % widths fro images and add max-width 100% to container
Creativira comments:
Please be more specific on the names of the containers, etc. Again, I'm trying to save time. Have you tried it in firebug and succeeded? I've been trying to do what you suggested but it did not work.
#content.home-widgets {
max-width: 100%;
padding: 0 !important;
}
and this
<div style="width: 100%; margin-left: auto; margin-right: auto;">[justified_image_grid ids="4475,4476,4477,4478,4479,4480,4481,4482"]</div>
Duncan O'Neill answers:
You'll need all of the following at the bottom of your [[LINK href="http://carolinecollective.cc/wp-content/themes/theonepager/style.css?ver=3.5.1"]]http://carolinecollective.cc/wp-content/themes/theonepager/style.css?ver=3.5.1[[/LINK]] file.
#content #featured-slider {padding-left:0;padding-right:0;}
#featured-slider .flexislider.no-frame,
#featured-slider .col-full {width:100%;max-width:100%;}
Then you'll need to find the place in your code or /wp-admin/ backend where the grid image size is controlled. This is because the images are styled inline like this;
<div class="jig-overflow" style="opacity: 1; width: 303px; height: 210px;">....
If you can't find it in the backend, try searching your local directory for the string "jig-overflow", and you should be able to find the code which is controlling this inline style.
hope this helps,
Creativira comments:
Thanks for the effort, Duncan. Daniel found the solution with one line of code.