cattleman Posted April 2, 2020 Share Posted April 2, 2020 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
tuanphan Posted April 3, 2020 Share Posted April 3, 2020 edit h3 >>> h3 center p >>>> p center 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
cattleman Posted April 3, 2020 Author Share Posted April 3, 2020 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! Link to comment
tuanphan Posted April 4, 2020 Share Posted April 4, 2020 try adding !important eg: text-align: left !important; 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
cattleman Posted April 6, 2020 Author Share Posted April 6, 2020 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 } Link to comment
tuanphan Posted April 6, 2020 Share Posted April 6, 2020 @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
cattleman Posted April 6, 2020 Author Share Posted April 6, 2020 Nice, yea that did it. Thank you for your help. I really appreciate it. Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.