rachelt 1 Share Posted May 26, 2020 (edited) Site URL: https://potato-sphere-g3k8.squarespace.com/config/ hi! How do I justify text in our paragraphs on our whole site? @tuanphan Website: naonow.com Password: naonow https://naonow.com/tutors I'd particularly like to justify font on our "tutor" page if possible!! Edited May 26, 2020 by rachelt Link to post
0 JOHNMD 31 Share Posted May 26, 2020 @rachelt In your Design> CSS add p { text-align: justify; text-justify: inter-word; } - John rachelt 1 mcgouran.john@gmail.com Link to post
0 rachelt 1 Author Share Posted May 26, 2020 (edited) Thank you so much!! Is there a code to get the text justified on mobile mode also? @JOHNMD Edited May 26, 2020 by rachelt Link to post
0 JOHNMD 31 Share Posted May 26, 2020 (edited) @rachelt Try this in Design> CSS @media only screen and (max-width: 640px) { p { text-align: justify!important; text-justify: inter-word!important;} } - John For your image question: usually what I do is open up the image editor for each image, select the crop tool and set all photos to the same aspect ratio eg 1:1 for square. Edited May 26, 2020 by JOHNMD mcgouran.john@gmail.com Link to post
0 rachelt 1 Author Share Posted May 26, 2020 @JOHNMD Also, do you know how to make the text NOT justified for these pictures and for the hover text to be shorter not full image on mobile mode only? Thanks!! Link to post
0 JOHNMD 31 Share Posted May 26, 2020 @racheltI'm unclear how you input your titles above. You appear to have different font sizes; some maybe h2 h3 and so on, or you may be using image-captions. Usually the best approach is to locate your Page Section ID and you can replace the "number" in the following code line: [data-section-id="5ea91572b3afb8186001cf71"] .image-caption{ text-align: left!important;} or: [data-section-id="5ea91572b3afb8186001cf71"] p { text-align: left!important;} or: [data-section-id="5ea91572b3afb8186001cf71"] h2, h3 { text-align: left!important;} - hope this helps On earlier revert to: @media only screen and (max-width: 640px) { p { text-align: justify!important;} } or, @media only screen and (max-width: 640px) { p { text-align:left!important;} } There are several options for Justify text. I find for short sentences align-left looks best. https://www.w3schools.com/cssref/css3_pr_text-justify.asp mcgouran.john@gmail.com Link to post
0 rachelt 1 Author Share Posted May 27, 2020 9 hours ago, rachelt said: @JOHNMD thank you!!! mobile still won't justify :(( Link to post
0 JOHNMD 31 Share Posted May 27, 2020 @rachelt Hey, typically, if you set the first line below, then all your paragraphs (p) should hold over to the Mobile settings, that is unless you have created css for specific targeted divs. You should only require one line of code - the first line below. The second line of code below is a Media Query specific to Mobile. You'll note that I set that line to"text-align: right" to see where this leads you. If you input both lines (three total below) then you should see a difference and know the code is effective. You can reset to using the first line. p { text-align: justify; } @media only screen and (max-width: 640px) { p { text-align: right!important;} } - John mcgouran.john@gmail.com Link to post
Question
rachelt 1
Site URL: https://potato-sphere-g3k8.squarespace.com/config/
hi! How do I justify text in our paragraphs on our whole site? @tuanphan
Website: naonow.com Password: naonow
https://naonow.com/tutors
I'd particularly like to justify font on our "tutor" page if possible!!
Link to post
Top Posters For This Question
5
4
Popular Days
May 26
7
May 27
2
Top Posters For This Question
rachelt 5 posts
JOHNMD 4 posts
Popular Days
May 26 2020
7 posts
May 27 2020
2 posts
Popular Posts
JOHNMD
@rachelt In your Design> CSS add p { text-align: justify; text-justify: inter-word; } - John
Posted Images
8 answers to this question
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment