Solved

Some issue with refresh theme

amirulaidul
Tourist
6 0 0

Need help I recently change the shopify theme to refresh. Some store got no issue but there is one issue appear.

Screenshot 2024-05-06 144830.pngScreenshot 2024-05-06 144941.png

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

Accepted Solution (1)
EBOOST
Shopify Partner
802 221 250

This is an accepted solution.

Hi,

I suggest remove code likes the screenshot below

EBOOST_0-1714989033402.png

CSS above related to this block

EBOOST_1-1714989050121.png

 

 

 

 

Hope can help


If you find my reply helpful, please hit Like and Mark as Solution


https://www.eboosttech.net


EBOOST

View solution in original post

Replies 7 (7)

sahilsharma9515
Shopify Partner
976 122 183

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:

  1. Login in shopify admin.
  2. Click on the Online Store.
  3. Then click on the button next to Customize in live Theme.
  4. Click Edit Code.
  5. Search theme.css/base.css/index.css/style.css in the code in left hand side which ever is available in your theme.
  6. You can add the above code at the bottom of the file.

Result:

sahilsharma9515_0-1714987546727.png

sahilsharma9515_1-1714987773683.png

 

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

 

Best Regards

Sahil

- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️


amirulaidul
Tourist
6 0 0

Still got the issue, I try to search theme.css/base.css/index.css/style.css cannot be found. 

Screenshot 2024-05-06 174443.png

sahilsharma9515
Shopify Partner
976 122 183

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

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️


EBOOST
Shopify Partner
802 221 250

This is an accepted solution.

Hi,

I suggest remove code likes the screenshot below

EBOOST_0-1714989033402.png

CSS above related to this block

EBOOST_1-1714989050121.png

 

 

 

 

Hope can help


If you find my reply helpful, please hit Like and Mark as Solution


https://www.eboosttech.net


EBOOST
amirulaidul
Tourist
6 0 0

amirulaidul_0-1714989606440.png

amirulaidul_1-1714989709566.pngamirulaidul_2-1714989729913.png

 


it solve some issue but still not the entire page. Here example the issue again.

EBOOST
Shopify Partner
802 221 250

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

EBOOST_0-1714988635615.png

 

 

Hope can help


If you find my reply helpful, please hit Like and Mark as Solution


https://www.eboosttech.net


EBOOST

PageFly-Noah
Astronaut
1079 197 215

 

 

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.