Jump to content

CSS for left-justification of text on mobile

Recommended Posts

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

Hello!

I'm looking for some help troubleshooting getting a custom code block to left-justify on mobile. \

Here's the custom HTML block & the relevant CSS code I'm using. 

When I look at my site on my phone, it still stays center justified.

Thanks for your help!

<h3><center>YOUR TIME IS LIMITED.<br>
BE THOUGHTFUL ABOUT HOW YOU SPEND IT.</center></h3>
<p><center>Let Dancing Chihuahua work with your team to scope out a custom project.</center></p>
@media screen and (max-width: 640px) { 
  h1 {
     font-size: 60px;
    }
    h3{
       text-align: left;   
    }
    p{
       text-align: left;   
    }
    }

 

Link to comment
  • Replies 6
  • Created
  • Last Reply

Top Posters In This Topic

Thanks so much for your help. I was able to get the h3 text to left justify, but the p text is staying centered on mobile still. 

Here's the updated CSS code for your reference:

p, h1, h2, h3, h4, h5 {
  -webkit-hyphens: manual !important;
     -moz-hyphens: manual !important;
      -ms-hyphens: manual !important;
          hyphens: manual !important;
}
h6{
   color: rgb(255,255,255);
  font-family: sofia-pro, sans-serif;
  font-weight: 900;
  font-size: 80px;
  line-height: 1.8em;
    padding-top: 40px;
}
h7 {
   color: rgb(255,255,255);
  font-family: alice, serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.8em;
 text-align: left;   
}

h5 {
  color: hsl(7, 70%, 64%);
  font-family: Sofia Pro;
  font-weight: 800;
  font-size: 30px;
}
@media screen and (max-width: 640px) { 
  h1 {
     font-size: 50px;
    }
  h3 center{
       text-align: left;   
    }
    p center{
       text-align: left;   
    }
  h6{
   color: rgb(255,255,255);
  font-family: sofia-pro, sans-serif;
  font-weight: 900;
  font-size: 50px;
  line-height: 1;
    padding-top: 60px;
}
    }

    
@media screen and (max-width:640px) {
div#block-yui_3_17_2_6_1508176087646_68928 * {
   text-align: left !important;
}

}

#block-yui_3_17_2_1_1571367142595_5719 { 
max-width: 100px !important;
    text-align: center
}

I really appreciate you making time to assist!

Edited by cattleman
Link to comment

I appreciate the continued help. Just tried that and am still getting the <p> as centered on mobile. 

 

p, h1, h2, h3, h4, h5 {
  -webkit-hyphens: manual !important;
     -moz-hyphens: manual !important;
      -ms-hyphens: manual !important;
          hyphens: manual !important;
}
h6{
   color: rgb(255,255,255);
  font-family: sofia-pro, sans-serif;
  font-weight: 900;
  font-size: 80px;
  line-height: 1.8em;
    padding-top: 40px;
}
h7 {
   color: rgb(255,255,255);
  font-family: alice, serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.8em;
 text-align: left;   
}

h5 {
  color: hsl(7, 70%, 64%);
  font-family: Sofia Pro;
  font-weight: 800;
  font-size: 30px;
}
@media screen and (max-width: 640px) { 
  h1 {
     font-size: 50px;
    }
  h3 center{
       text-align: left !important; 
    }
    p center{
       text-align: left !important; 
    }
  h6{
   color: rgb(255,255,255);
  font-family: sofia-pro, sans-serif;
  font-weight: 900;
  font-size: 50px;
  line-height: 1;
    padding-top: 60px;
}
    }

    
@media screen and (max-width:640px) {
div#block-yui_3_17_2_6_1508176087646_68928 * {
   text-align: left !important;
}

}

#block-yui_3_17_2_1_1571367142595_5719 { 
max-width: 100px !important;
    text-align: center
}

 

2020-04-06 at 10.07 AM.png

Link to comment
@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1585863762234_7141 * {
    text-align: left;
}
}

also, html tag has no h7

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.