Native WordPress Gallery Width

[rootdigger]

Hi Swiftideas-Team, I try to use the WordPress built-in gallery function.

Here: http://hiddenrooms.de/studioproxy/

I took the 2 colums option with my images having a native width of 570 px (half of your grid with some white space). I just want to show them in full size (no pop), unfortunately they were scaled down by your css to 17%.

.gallery .gallery-item {
width: auto;
float: left;
display: inline;
margin: 0 14px 14px;
width: 17%;
}

I guess you made this for some reason, but I couldn’t find a gallery option in your page builder where it is applied.

So I changed the width in my child.css to 47%; which works fine, but when the site is scaled down to tablet or mobile view, the 2 colums design changes into just one column (which makes sense), but the images are then again scaled down to 17% or the like.

How can I deal with this? Stripping out your whole CSS GALLERY SHORTCODE section doesnt work…

And there is sometime a black image (or div container) background, coming from this code:

.gallery-item .gallery-icon {
background: #222 url(images/view-image.png) no-repeat center center;
width: 100%;
height: auto;
}

What is it for?

Best, Rüdiger

[Kyle – SUPPORT]

Hi

It’s still using your css http://d.pr/i/180vT/5Dtaev8C but 47% is half of the screen width that’s why they’re small. you should use media queries for the sizes, for e.g. try adding this:

@media only screen and (max-width: 767px) { 
.gallery .gallery-item {
  margin: 0 0 10px;
  width: 100%;
}
}

– Kyle

[rootdigger]

Hi Kyle, thanks for your quick response… I applied your code but the gallery still doesn’t behave like the page builder content on top of the page.

http://hiddenrooms.de/studioproxy/

Desktop and Smartphone is ok, but in medium size (tablet view?), the gallery too quick switches to one colume style, and the images are not full width then.

Setting the @media only screen and (max-width: 767px) to 1024px didn’t help either…

Best, Rüdiger

[Kyle – SUPPORT]

Please provide me with a login so I can try and solve this for you

– Kyle

[rootdigger]

This reply has been marked as private.

[Kyle – SUPPORT]

Please can you check the page because for me it’s showing up all broken http://d.pr/i/1eSlw/2KLCAjUL

– Kyle

[rootdigger]

Hm, havent seen something like this before. As if the content left the containers:) Does this maybe happen sometimes when switching too often between classic editor and page builder? The page still looks good in frontend (except the gallery scaling problem…:)

Here is my screenshot, havent changed a thing, 5 Page builder blocks and the wordpress gallery code below. Looks ok.

http://hiddenrooms.de/download/screenshot.png

[Kyle – SUPPORT]

The image in the bottom isn’t within a page builder asset

– Kyle

[rootdigger]

Right. The 5 page builder assets aren’t the problem, it’s about the native WordPress Gallery used below. In my opinion, your custom CSS does influence it, but not in the right way when switching to tablet/mobile. The scaling/line break is strange.

Best, Rüdiger

[Kyle – SUPPORT]

That’s because you haven’t added the gallery in a page builder text box. you can just have half your page in the page builder and half not

– Kyle

[rootdigger]

So I should add the gallery code into a page builder text box? Done that, but with the same strange behavior:

http://hiddenrooms.de/download/screenshot2.png

[Kyle – SUPPORT]

Seems fine to me now?

– Kyle

[rootdigger]

In my point of view, the problem still exists…2 colums change to 1 column in tablet view, but images are pretty small then, plus in mobile view, a black backround block is to be seen behind the images.

My CSS changes:

.gallery .gallery-item {
margin: 14px 14px 14px;
width: 47%;
}

and as you told me:

@media only screen and (max-width: 767px) {
.gallery .gallery-item {
margin: 0 0 10px;
width: 100%;
}
}

[Kyle – SUPPORT]

dt.gallery-icon > img {
width: 100%;
}

Will solve the black box problem

For the tablet issue, change the css above (first bit) to:

.gallery .gallery-item {
  margin: 2%;
  width: 46%;
}

– Kyle

[rootdigger]

Ok, that’s it, thanks Kyle!