[sandra.iParticipant]

Hi

My blog layout is in 3 columns and looks ok on laptops and horizontal tablets, but when the tablet is vertical so that the layout goes from 3 columns to 2, there is some overlap of the 2 columns.

Could you help me fix this issue?

The url is: http://www.sandraishkanes.co.uk/news/

Thanks

[RupokMember]

Hi there,

Thanks for writing in! I have checked your site and can’t see any overlapping. Would you point us the issue with a screenshot?

[sandra.iParticipant]

Hi

I attach a screengrab.

Thanks

[Rue NelModerator]

Hello There,

Thanks for providing the screenshot. The masonry layout needs to initialize and re initialize as you go portrait or landscape on a mobile device. The events on the devices is way more different by just resizing the the browser window or by just using an emulator. Please test it on an actual device so that you will see the actual initialization of the masonry layout especially the columns and its column widths.

Hope this make sense.

[sandra.iParticipant]

Hi

Thanks for you reply.

It looks exactly the same on my ipad, an actual device, it was easier to send you a screengrab from an emulator, but the problem is just the same on a real device.

I think there could be a problem with the margins on landscape made.

Thanks

[Paul RModerator]

Hi,

You can add this under Custom > Edit Global CSS in the Customizer.

@media (max-width: 979px) and (min-width: 768px) {
.x-iso-container.cols-3>.hentry {
    width: 48%;
}
}

Hope that helps.

[sandra.iParticipant]

Hi

No that didn’t do anything.

I noticed also that the vertical divider lines between the columns are missing, as there should be between the columns and on the left and right sides, as seen in the 3 column layout (see attached screengrab).

[JoaoModerator]

Hi There,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks!

[sandra.iParticipant]

This reply has been marked as private.

[JoaoModerator]

Hi There,

Your blog seems fine, would you mind to clarify what you would like to fix and please provide a screenshot so we can better understand and assist you.

Thanks!

[sandra.iParticipant]

Hi

The problem is that on a portrait ipad, the 2 columns overlap and the dividing lines are missing:

See screen shot – ‘how it looks’

The 2 columns should look like the ones in the screen shot here – a screenshot from a landscape ipad so showing 3 column:

See – ‘How it should look’

[sandra.iParticipant]

hello…..?

[RadModerator]

Hi there,

You have existing custom CSS that adds 0 borders, example

.blog .x-iso-container.cols-3 > .hentry {
    border-left: 0 solid #d5cece;
    padding: 15px 0 15px 0;
}

It’s under this @media block

@media screen and (max-width: 768px) and (min-width: 320px)

Now, 767px is for mobile, 768px and above is tablet. That means your CSS also applies to the tablet too, you should change it to 767px for max-width. But don’t change the 768px if it’s min-width.

Thanks.

[sandra.iParticipant]

Hi

Great, that’s fixed it.

But… now there is a gap in the right hand column, on the right – I attach a screen shot. I haven’t been able to work out why that’s happened – could you have a look?

Thanks

[Rue NelModerator]

Hello There,

Thanks for providing the screenshot. This issue happened because your your width settings. Please have your css code updated and make use of this code instead:

@media (max-width: 979px) and (min-width: 768px){
  .x-iso-container.cols-3>.hentry {
    width: 49.95%;
  }
}

Please let us know if this works out for you.

[Author]

Posts