Hey everyone!
We’re having problems on Android phones. None of the pages get adjusted for phone screens.
Would gladly appreciate some help.
Topic summary
A Shopify store owner reported that their website displays in desktop view on Android devices instead of adjusting to mobile screens.
Initial Solution:
- Add CSS code to the theme.css file targeting the
.wrapperelement withwidth: auto !important; - This resolved the initial mobile responsiveness issue
Follow-up Issue:
- After implementing the fix, a new problem emerged where pages appear cut in half on mobile
- Screenshots were shared showing the layout problem
Second Solution:
- Additional CSS media query provided for screens with max-width 767px
- Code targets
.icons-rowand.icons-row__itemelements - Applies flexbox properties and margin adjustments to fix the layout
Both solutions involve editing the theme.css file through Shopify Admin → Online Store → Themes → Actions → Edit Code. The discussion appears resolved with the implementation of these CSS fixes.
- In your Shopify Admin go to online store > themes > actions > edit code
- Find Asset > theme.css and paste this at the bottom of the file:
.wrapper {
width: auto !important;
}
1 Like
thanks that worked!!!
1 Like
now theres another problem, the page is cut in half.
the URL is cb-dx.com without the dash
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file theme.css
Step 3: Paste the below code at bottom of the file → Save
@media only screen and (max-width: 767px){
.icons-row .icons-row__slider {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.icons-row__item{
margin-right: 0px !important;
}
}
1 Like