Jump to content

align all text and images on page

Recommended Posts

Posted

Dear all,

I' ve two questions.
Currently designing a page (can't share the entire page, due of privacy at this moment).

#1 Text
I'm satisfied with the text alignment on a desktop view which is 'aligned left'

However on a mobile view I want all text 'center aligned'.

How to align all text on a page  on mobile to 'center' in stead of  identifying all the text blocks separately

For a single text block i'm currently using the following code.

media screen and (max-width:640px) {
div#bloc-76fc688fe6c339c3b693 * {
   text-align: center !important;
}
div#block-76fc688fe6c339c3b6934 {
   padding-top: 10px !important;
   padding-bottom: 20px !important;
   padding-left: 30px !important;
   padding-right: 40px !important;
}
}

#2 Images
I can't figure it out how to align images block to the left or right. They are always centered on mobile.  The text  beneath on mobile is a separate text block, next to the image on the desktop.

I've attached a sample.

Small note:
I'm completely a beginner with css or any coding (that's why iam using squarespace 🙂).
But i manage to break down code a little bit.

Is there anybody who can help me out?

Kind regards,

Sjoerd

 

desktop.PNG

mobile.PNG

  • Replies 1
  • Views 1.2k
  • Created
  • Last Reply
Posted

I've figured it out the text part with the following code

 

// all text
@media only screen and (max-width: 480px) {
p, H1, H2, H3 { text-align: center; }}

But the image block is still a pain in the..

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.