Shopify themes, liquid, logos, and UX
Need help I recently change the shopify theme to refresh. Some store got no issue but there is one issue appear.
In desktop there is no problem all good to go, but in mobile view, there is issue like the image given. It look like the content become stack on mobile view.
Here is the page to refer: https://au.myfirst.tech/products/myfirst-fone-r2
Solved! Go to the solution
This is an accepted solution.
Hi,
I suggest remove code likes the screenshot below
CSS above related to this block
Hi @amirulaidul It seems like there is a conflict in your css file that is causing you this issue.
Please add the code in your theme.css/base.css/style.css file which is available in your theme.
.__pf .pf-r, .__pf .pf-r-eh>.pf-c {
flex-direction: row !important;
}
.slider-buttons {
justify-content: space-around !important;
flex-direction: row !important;
}
.slider-counter {
justify-content: space-between !important;
flex-direction: row !important;
}
If you are not sure where is your theme.css/base.css/index.css/style.css file please follow the steps:
Result:
Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!
Best Regards
Sahil
- Your
Still got the issue, I try to search theme.css/base.css/index.css/style.css cannot be found.
Hi @amirulaidul There should be 1 of these files in your store, Just search theme.css if it is not there then search base.css if it is not there then search index.css if it is not there then search style.css and add the code as mentioned above.
Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!
Best Regards
Sahil
- Your
This is an accepted solution.
Hi,
I suggest remove code likes the screenshot below
CSS above related to this block
it solve some issue but still not the entire page. Here example the issue again.
Hi @amirulaidul ,
May I suggest to update code these steps:
1. Go to Store Online-> theme -> edit code
2. Assets/base.css
3. Add code below to end of file
body .slider-counter,
body .slider-buttons {
flex-flow: nowrap;
}
And I suggest you remove code like the screenshot below
This is Noah from PageFly - Shopify Page Builder App
Please add code here to fix it:
Step 1: Online Stores > Themes > Edit code
Step 2: Choose file theme.liquid
Step 3: Add code above the tag </body>
<style>
@media screen and (max-width: 767px){
.slider-buttons {
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.sc-iqseJM .sc-fHeRUh .pf-r{
display: flex !important;
}
}
</style>
Hope my solution will help you resolve the issue.
Best regards,
Noah | PageFly
Please let me know if it works by giving it a Like or marking it as a solution!
PageFly - #1 Page Builder for Shopify merchants.
All features are available from Free plan. Live Chat Support is available 24/7.
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025