Skip Navigation

[Resolved] Item info overlaps item image when screen size gets smaller

This thread is resolved. Here is a description of the problem and solution.

Problem: At certain screen sizes, some of the content in the right column of my site overlaps the image displayed in the left column.

Solution: Remove the col-md-6 class from the element marked in the attached screenshots.

Relevant Documentation: https://getbootstrap.com/docs/3.3/css/#grid

This support ticket is created 7 years ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 - -
13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 - -

Supporter timezone: America/New_York (GMT-04:00)

This topic contains 4 replies, has 3 voices.

Last updated by veronicaG-2 7 years ago.

Assisted by: Christian Cox.

Author
Posts
#580379
item_info_overlap.jpg

I am trying to: have the product info and image not overlap when the screen responsive size gets smaller or more toward a square size... similar to an older squarish monitor dimension. Once you get to mobile sizes the info moves to the bottom as it should but when viewing on some older style monitors (not widescreen) the information seems to cover the image.

Link to a page where the issue can be seen: hidden link

I expected to see: the product information should move under the product image...but when the screen gets smaller -not mobile small because at that point it does move down- the information will start to overlap the image until it gets even smaller then it will move down.

Instead, I got:

#580511

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00:00)

Hi Veronica

Toolset uses Bootstrap for its grid system which, by default, stacks columns beneath each other on devices smaller than 768px, and given your content you may need to modify the screen size at which this occurs so that it happens on larger screens.

We have an extensive page of documentation about such tweaks to responsive layouts here: https://toolset.com/documentation/user-guides/creating-responsive-designs/

Could you read through that to understand what choices are available to you, and if you are still stuck when you try to implement it let me know.

#581737

Yes, I still need help. I've tried changing the Default Bootstrap Column Width for the entire site -with all the options listed there- still overlaps. I've tried adding col-md-6, col-md-5 and col-md-4 - to the row, the column, the individual cells (separately). None of those worked. It only happens when the screen size is at or just under a 4:3 ratio -

At a small size -cell phone sized - the text moves down under the image. Al large sizes - widescreen monitors- it is side by side and fine. With medium sized monitors using a resolution of using 1280 x 1024 or the non-widescreen 4:3 ratio monitors it overlaps the text and the image. Which is when trying to fix I was using col-md-#.

Any help would be greatly appreciated.
Thanks,
Veronica

#582103
before.png
after.png

Hi, Nigel is on holiday for a few days so I've been assigned to look after this ticket. I hope that's okay with you. I believe I see the problem you are referring to. I've tracked down the source of the problem and it seems that I can fix the overlap issue by removing the "col-md-6" class from the element marked in the attached screenshots. Can you update your design to remove the col-md-6 class applied to the left column and confirm it's behaving more like you expect?

#582192

Thank you! It's fixed!