New Shopify Certification now available: Liquid Storefronts for Theme Developers

Mobile View for Testament Theme

SSalmon
Visitor
2 0 0

Just published the Testament theme and the movile view shoing up on my laptop is very different from the mobile view I get. I'm using Firefox on my Mac. Android phone browser is Chrome.

I've found some answers posted to others regarding some Theme>Edit Code> Assets> script to include. I did not see any that were for theme.js script for Testament...

This is the view my laptop says I should have:

Screen Shot 2021-03-30 at 1.11.16 PM.png

 

This is the actual mobile view on my Android currently. I tried reducing the vertical and horizontal placement of the text, but it doesn't change the mobile version, just changes the laptop "mobile" view.

Wildwood Herbal Mobile Issue.png

 

Website is www.wildwoodherbal.org

Click 'Enter', the Viewing password is wiatso

Thanks!

Replies 2 (2)
ZestardTech
Shopify Expert
5300 950 1262

Hello There,

1. Go to Online Store->Theme->Edit code
2. assets/stylesheet.css->paste below code at the bottom of the file.

@media only screen and (max-width: 746px){
.image__overlay-caption {
text-align: center!important;
margin-left: auto!important;
margin-right: auto!important;
}
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
SSalmon
Visitor
2 0 0

When I added that code into the end of the area specified, it only changed the theme preview mobile view to match the actual mobile view- which is still overlapping as before.

Screen Shot 2021-04-01 at 1.36.52 PM.png