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

[Author]

Posts

[veronicaG-2]

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:

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01: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.

[veronicaG-2]

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

[Christian Cox]

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?

[veronicaG-2]

Thank you! It's fixed!