Hi nparsons. Give this a try:
1. Remove the nbsp; code between the galleries.
2. Add this to your custom CSS:
/* galleries in 2 columns */
div[id^="foogallery-album-"] {
width: 50%;
float: left;
}
/* galleries 1 column on mobile */
@media screen and (max-width: 919px) {
div[id^="foogallery-album-"] {
width: 100%;
}
}
Since each gallery container has a common id with a unique numeric suffix we can use an element attribute to target them all. The above CSS finds any <div> element with an “id” attribute that has a name beginning with “foogallery-album-“.
Hi, thanks for the help. I can’t see the nbsp; as the gallery uses shortcodes. This is what I see.
[foogallery-album id=”497″] [foogallery-album id=”496″]
I have just added the code and it seemed to work, kind of. The albums are side by side but not aligned horizontally?
It’s due to the non-breaking space code. Can you see it in the Text (not Visual) editor?
No, I have looked in visual and text, but cannot see the nbsc! For some reason…
[foogallery-album id=”497″] [foogallery-album id=”496″]
What if you remove the space between the two shortcodes?
