Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Question

8 answers to this question

Recommended Posts

  • 0
Posted (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 by JOHNMD

mcgouran.john@gmail.com

Share this post


Link to post
  • 0

@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!!

 

image.thumb.png.7ed0cce249d678e3c62574a73211048d.png

Share this post


Link to post
  • 0

@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

Share this post


Link to post
  • 0

@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

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...