Announcement bar customization - Dawn theme

[ryosuke007]

Hi,

on mobile phone, I want to get the part of the text 12/18 to the second line. In other words, I want to put ENTER before the 12/18 text so the text when displaying on mobile phone would be in two lines like showed below:

1st collection 受注受付期間は、

12/18 (水) 21:00 - 20 (金) 23:59です。

https://jours-plus.com/

Password: 1234

Any help would be highly appreciated.

[Moeed]

Hey @ryosuke007

Follow these Steps:

1. Go to Online Store

2. Edit Code

3. Find theme.liquid file

4. Add the following code in the bottom of the file above tag

RESULT:

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[steve_michael2]

Hi @ryosuke007 ,

1. Go to Online Store → Theme → Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

@media(max-width:767px){
p.announcement-bar__message.h5 {
    font-size: 17px;
   
}
}

If my reply is helpful, kindly click like and mark it as an accepted solution.

If you are happy with my help, you can help me buy a COFFEE

Thanks!

[Dan-From-Ryviu]

HI @ryosuke007

You can add this code to Custom CSS in Online Store > Themes > Customize > Theme settings

@media (max-width: 749px) {
p.announcement-bar__message.h5 { max-width: 302px; }
}

[PageFly-Richard]

This is Richard from PageFly - Shopify Page Builder App

Hi @ryosuke007 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

Hope my solution will help you resolve the issue.

Best regards,

Richard | PageFly