ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

• Back to forum

  Posted in: Neighborhood
• February 4, 2015 at 10:45 am #147107
  rootdigger

  Member

  Post count: 37

  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

  February 4, 2015 at 12:36 pm #147161
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  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

  February 4, 2015 at 1:21 pm #147178
  rootdigger

  Member

  Post count: 37

  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

  February 4, 2015 at 1:28 pm #147181
  Kyle – SUPPORT

  Moderator

  Post count: 35880

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

  – Kyle

  February 4, 2015 at 1:44 pm #147187
  rootdigger

  Member

  Post count: 37

  This reply has been marked as private.
  February 5, 2015 at 11:48 am #147505
  Kyle – SUPPORT

  Moderator

  Post count: 35880

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

  – Kyle

  February 5, 2015 at 8:45 pm #147688
  rootdigger

  Member

  Post count: 37

  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

  February 9, 2015 at 9:04 am #148263
  Kyle – SUPPORT

  Moderator

  Post count: 35880

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

  – Kyle

  February 10, 2015 at 8:55 am #148609
  rootdigger

  Member

  Post count: 37

  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

  February 10, 2015 at 9:00 am #148615
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  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

  February 10, 2015 at 9:37 am #148634
  rootdigger

  Member

  Post count: 37

  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

  February 10, 2015 at 9:52 am #148641
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  Seems fine to me now?

  – Kyle

  February 10, 2015 at 9:59 am #148644
  rootdigger

  Member

  Post count: 37

  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%;
  }
  }

  February 10, 2015 at 10:03 am #148646
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  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

  February 10, 2015 at 10:21 am #148651
  rootdigger

  Member

  Post count: 37

  Ok, that’s it, thanks Kyle!

• Back to forum

  Posted in: Neighborhood