Refresh Theme - Mobile version design

Edgard22
Explorer
64 3 5

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 ? 

Replies 7 (7)

TerenceKEANE
Shopify Partner
511 86 78

Hi!

 

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

 

Terence.

TerenceKEANE_0-1716292273086.png

 

 

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ Get skilled Shopify developers at BUDGET-FRIENDLY RATES — explore Novajetsoft.com for a rapid quote!
If my support was a lifeline for you, The COFFEE  
would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites

BSSCommerce-HDL
Shopify Expert
748 246 255

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

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 😍

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
Edgard22
Explorer
64 3 5

Sorry not working :s 

 

Screenshot 2024-05-21 14.36.10.png

BSSCommerce-HDL
Shopify Expert
748 246 255

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

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 😍

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

PageFly-Amelia
Shopify Partner
461 145 208

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

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.


Optimize your store’s mobile shopping experience with the Blum theme.

Anshul_arora
Navigator
424 121 84

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.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here
Edgard22
Explorer
64 3 5

Hi, i don't get it ..