Refresh Theme - Mobile version design

[Edgard22]

Website : www.brasebreizh.fr 

Hi 🙂 

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 ? 

[TerenceKEANE]

Hi!

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

Terence.

[BSSCommerce-HDL]

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: 

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 😍

[Edgard22]

Sorry not working :s 

[BSSCommerce-HDL]

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  

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 😍

[PageFly-Amelia]

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

[Anshul_arora]

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 </body> tag and save.

<style>

@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;
}

}

</style>

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.

[Edgard22]

Hi, i don't get it ..