Jump to content

How to center + reduce text size on announcement bar (for mobile only)

Recommended Posts

Site URL: https://www.twoofakindrentals.com

Hello! My announcement bar has text that's right aligned for desktop view, but I want this text to be centered & made slightly smaller for the mobile view. Text should stay as-is for the desktop view and only be adjusted for the mobile view. 

Can you kindly tell me what the code is to adjust the text on mobile view? 

IMG_7863.jpg

Edited by KLantz
Link to comment
  • KLantz changed the title to How to center + reduce text size on announcement bar (for mobile only)
3 hours ago, KLantz said:

Site URL: https://www.twoofakindrentals.com

Hello! My announcement bar has text that's right aligned for desktop view, but I want this text to be centered & made slightly smaller for the mobile view. Text should stay as-is for the desktop view and only be adjusted for the mobile view. 

Can you kindly tell me what the code is to adjust the text on mobile view? 

IMG_7863.jpg

Check this in Design->Custom CSS

@media screen and (max-width: 640px) {
  .sqs-announcement-bar-text {
        padding: .8em 1em;
  }
  .sqs-announcement-bar p {
    	display: flex;
    	align-items: flex-start;
  }
  .sqs-announcement-bar-text p > a{
        width: 25%;    
    	font-size: 0.7rem;
    	display: inline-block;
  }
}

image.png.87e9fdefb52fe06ba5a262aa4e5e81d7.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

@KLantz On mobile, I think you can consider convert clients we work with to 2 logos/row, it will be better.

If you want, use this CSS

@media screen and (max-width:767px) {
div#page-section-5f56951efab9b365a26c9902>.row:nth-child(2)>.span-2 {
    width: 50% !important;
    float: left !important;
}
div#page-section-5f56951efab9b365a26c9902>.row:nth-child(2)>.span-2:nth-child(2n+1) {
    clear: left;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 year later...
3 hours ago, IwanJ said:

Hi there @tuanphanor @bangank36

I can change the font size in my mobile view announcement bar, but how do i reposition the 'x' button? (to centre align it in the announcement bar section and move it a bit to the right)

Can you please help?

https://deep-learning-cafe.squarespace.com/

password: password123

Capture4.PNG

You can try

.sqs-announcement-bar-close {
  top: 50%;
  transform: translateY(-50%);
}

Let me know how it works on your site

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.