Masonry Gallery Responsive Issue WordPress
- SOLVED
I am using the WC Canvas Gallery plugin to display my Wordpress gallery in a Masonry layout:
[[LINK href="http://www.amandahakan.com/amanda-hakan"]]http://www.amandahakan.com/amanda-hakan[[/LINK]]
password: amanda
It is responsive up until a point but then suddenly breaks. The images completely disappear and when loaded in mobile view (or anything under 767 px) the images appear as tiny, tiny dots that are almost invisible. The plugin uses the [[LINK href="http://masonry.desandro.com/"]]Masonry[[/LINK]] script and CSS but I cannot seem to get the images to display in mobile view. Ideally I would like them to just be in 1 column at 100% the post's container width and have a 10px margin on the bottom. Alternatively, I would also have 2 columns displayed at this width but would really rather have 1 column at full width for mobile view.
Is there any way to make this masonry layout 100% responsive according to the screen size? How can I make this work?
Answers (2)
Hariprasad Vijayan answers:
Hi,
Try this in css
@media screen and (max-width: 767px) {
.wc-gallery .gallery-item {
position: relative !important;
}
}
or add position: relative !important; it the existing style.css line no 150.
Jayaram Y answers:
Hariprasad solution works.. Addition to that is to make the small image full width please add the below code
@media screen and (max-width: 767px) {
.wc-gallery .gallery-item {
position: relative !important;
top:0 !important;
}
.wc-gallery .gallery .gallery-icon a img{
width:100%;
}
}
By adding the above code, the spaces between the images will be removed and also the smaller images will fit the screen. i.e 100% of the screen.
paulwagenblast comments:
Hi guys, thank you for your suggestions but I added the code and now a different problem arises. The images do appear but they are not 100% the width of the screen and are jumbled all over the page. I've attached a screenshot of what it looks like now...any suggestions on making this one column at 100% width?
paulwagenblast comments:
UPDATE: I did solve the problem by adding two more lines:
@media screen and (max-width: 767px) {
.wc-gallery .gallery-item {
position: relative !important;
top:0 !important;
clear: both;
width: 100% !important;
}
.wc-gallery .gallery .gallery-icon a img{
width:100%;
}
}
thank you guys for your help!
Jayaram Y comments:
Please update the css to this
@media screen and (max-width: 767px) {
.wc-gallery .gallery-item {
position: relative !important;
top:0 !important;
width:100% !important;
clear:both;
}
.wc-gallery .gallery .gallery-icon a img{
width:100%;
}
}
Jayaram Y comments:
oops seems like you solved :) same time