Refresh Theme - Mobile version design

Store Design
, , ,
1

Website : www.brasebreizh.fr

Hi :slightly_smiling_face:

I’ve changed the base.css code on my website in order to centered the H1 (on homepage), it works perfectly on PC but not on mobile

code used is :

.collection-list-wrapper .title-wrapper-with-link { width: 700px !important; text-align: center !important; margin: 0 auto !important; }

BUT

I would like to mobile version look like Desktop

L’authentique Braséro Breton

Brase Breizh

Could you help me ?

2

Hi!

The section below appears centered on mobile as well. I hope I understood correctly?

Terence.

TerenceKEANE_0-1716292273086.png
TerenceKEANE_0-1716292273086.png823×685 429 KB

3

Hi @Edgard22 ,

You can try this code by following these steps:

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file base.css, theme.css or styles.css

Step 3: Insert the below code at the bottom of the file → Save

@media (max-width: 768px) {
   .collection-list-wrapper .title-wrapper-with-link h2 {
    font-size: 22px !important;
   }
}

Here is result:

BSSTechVenture_0-1716292783129.png
BSSTechVenture_0-1716292783129.png616×789 467 KB

Hope this can help you,
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

4

Sorry not working :s

Screenshot 2024-05-21 14.36.10.png
Screenshot 2024-05-21 14.36.10.png622×711 689 KB

5

Hello @Edgard22

This is Amelia at PageFly - Shopify Advanced Page Builder app.

You can try the following steps I have provided to help you solve the problem you are facing:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file base.css

Step 3: Add code

@media (max-width: 767px) {
   .title-wrapper-with-link h2 {
      font-size: 20px !important;
   }
}

Hoping my solution helps you solve your problem.

Best regards,

Amelia | PageFly

6

Hello @Edgard22 ,

I have reviewed your store and understand your are looking to display the text (word) similar to the desktop

Add the below mentioned CSS code at the bottom of theme.liquid file before tag and save.

@media screen and (max-width: 775px) and (min-width: 510px) { h2#SectionHeading-template--21380935287130__collection_list_MfXY7 { font-size: 33px !important; } } @media screen and (max-width: 510px) and (min-width: 416px) { h2#SectionHeading-template--21380935287130__collection_list_MfXY7 { font-size: 25px !important; } } @media screen and (max-width: 416px) and (min-width: 385px) { h2#SectionHeading-template--21380935287130__collection_list_MfXY7 { font-size: 23px !important; } } @media screen and (max-width: 385px) { h2#SectionHeading-template--21380935287130__collection_list_MfXY7 { font-size: 20px !important; } }

This code may help you to display the text in different dimensions as per your requirements.

Output in different dimension -: https://prnt.sc/B_ejvKpTRY39 , https://prnt.sc/AbUEcyO1qfLT , https://prnt.sc/vqAsdETKBRIK

Please share if you have any queries.

Thank you.

7

Hi @Edgard22 ,

You can try this code by following these steps:

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid
Step 3: Inside tag head. You need create style tags. After you’ll insert my code inside it

BSSTechVenture_0-1716295663287.png
BSSTechVenture_0-1716295663287.png400×184 34.7 KB

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

8

Hi, i don’t get it ..