A user seeks to fix the mobile view of their “Shop all” products page where product names (“Hygiene Pod” and “Cleaning Tablets”) are breaking onto multiple lines, making the layout appear cluttered.
Proposed Solution:
A CSS media query targeting mobile screens (max-width: 767px) that reduces the font size of product titles to 23px to prevent text wrapping.
Implementation Steps:
theme.liquid file<style> tags before the closing </body> tagStatus: The solution has been provided but not yet confirmed as implemented or tested. The user indicated this might be their final fix needed for the site.
I would like my mobile view of all products page to look cleaner. I want the Hygiene Pod and Cleaning Tablets to be written correctly without skipping to the next line (MOBILE VIEW ONLY)
Thankyou in advance! I believe this is my final FIX!!
URL: hygiadental.com
pw: myown
@media screen and (max-width: 767px) {
#shopify-section-template--17786616447076__featured_collection_NTiUDA h3 {
font-size: 23px !important;
}
}
Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->
under the tag before the body ----->
if this code work please do not forget to like and mark it solution
