CMS Development

EliteElastomer
Member

Text overlap on home webpage

SOLVE

I have a problem with a client’s template that HubSpot created. They worked through support and it seems they can’t help. It has to do with Elite Elastomers home page. When it’s viewed in mobile only the drop down menus cover the page. All other pages are OK. We talked to an outside company and they say all they can do is rebuild the website.

 

text overlaptext overlap

 

 

0 Upvotes
1 Accepted solution
ndwilliams3
Solution
Key Advisor

Text overlap on home webpage

SOLVE

I took a look at your site and it appears to be an issue with the slider. Without digging into the code it looks like the javascript is not calculating the width on the viewport correctly when on mobile. I think it my be a CSS issue. The list items that make up the slider are hidden on load and the parent grid column width is set to auto on mobile. This gives the element a width of 0 at load causing the script to incorrectly calculate the width. Try adding this to your CSS and see if it solves the problem.

 

#hs_cos_wrapper_module_142323786842211797

#hs_cos_flex_slider_module_142323786842211797, 

{

width: 100%;

}

 

View solution in original post

2 Replies 2
AHansen1
Member

Text overlap on home webpage

SOLVE

A responsive design will automatically adjust the website's layout to fit the screen size of the device it is being viewed on. This will ensure that the drop-down menus are always visible and accessible, regardless of the screen size.

0 Upvotes
ndwilliams3
Solution
Key Advisor

Text overlap on home webpage

SOLVE

I took a look at your site and it appears to be an issue with the slider. Without digging into the code it looks like the javascript is not calculating the width on the viewport correctly when on mobile. I think it my be a CSS issue. The list items that make up the slider are hidden on load and the parent grid column width is set to auto on mobile. This gives the element a width of 0 at load causing the script to incorrectly calculate the width. Try adding this to your CSS and see if it solves the problem.

 

#hs_cos_wrapper_module_142323786842211797

#hs_cos_flex_slider_module_142323786842211797, 

{

width: 100%;

}