Mobile Responsive issue

I am having some issue with sizing on images on mobile phones. The images look ok wihen I resize the image on my laptop. However, when I am checking the images on my mobile devices, the images are smushing together or is not showing at all, I don’t know what is causing the issue.

Hi There,

Can you point the specific images you are referring to?

I noticed your The Grid images dont look good on mobile , that is because you set to 4 grid items to show per row on mobile and that is a bit too much for mansory.

Please select 1 grid item per row.

Let us know the other images you need help.

Thanks!

It’s not happening all the time but it picks and choose when to show the correct version for mobile and tablet

I am attaching screenshots of what I am seeing.

Hi,

I need to check your The GRid and Envira Gallery settings.

Would you mind providing us with login credentials so we can take a closer look? Please provide following information:

Set it as Secure Note

  • Link to your site
  • WordPress Admin username / password

All the best!

okay the link to the site and admin info will be attached.

Hello There,

The grid seems okay. I can see that you are using a text element and a grid shortcode.

<p style="text-align: center;">[the_grid name="Tablet"]</p>

Please make use of the “The Grid” element.

This will make sure that it fits right in the column without any broken html code. The text element will convert line breaks and new lines which could messed up the output code of the grid layout.

Hope this helps.

Okay, so I am now using the grid element. However, I am still running into the image sizing issue and the number of post that shows on a device is not correct. For instance I want three post for desks, and laptops. I want two post for large and small tablets and one post for cell phones. But it’s not allowing me to set those options. I am even trying to create seperate sections for each post types and hide the sections, but it’s not working properly.

Hello There,

To instantly see the changes you’ve made, Please deactivate W3 Total Cache first. Caching plugins are best to turn on only when you’ve finished building the site.

I have checked the page and it seems that you have set “Hide During Breakpoints” option in the column and section settings. Please make sure that the two sections does not have the same settings. The first section should be visible to smaller screens and the second section should be visible in large screens.

I assumed that you were having a difficulty in switching over between the sections. Please toggle the screen size preview so that it would be easier for you to check the sections.

Or you can make use of the sskeleton mode when editing for faster response and easy access of the elements on the preview area.

Hope this helps.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.