• Hi,

    On my page http://www.tripcandy.com.au/?p=1 you’ll notice that below 780px width, the two containers stack on top of each other, which is fine. The top div has no padding on it, and I have left indented the text so that is does not sit right on the side of the container. The same cannot be said for the other side where the ‘How to book’ section hugs the right side of the container.

    Keep in mind that I want to maintain 0 padding, is there any way to right indent the text so that it doesn’t hug the border of the container?

    Many thanks,
    W

Viewing 2 replies - 1 through 2 (of 2 total)
  • It looks like you added an inline style for each paragraph, which was a lot of work. You should have just added a CSS rule to indent all of them in one shot. As far as the right side goes, you can do the same thing, add a padding-right of 30px, but add this CSS rule to your child theme instead:

    
    @media (max-width: 780px) {
       #pgc-1-0-0 .textwidget p {
          padding-right: 30px;
       }
    }
    

    Note that it’s placed inside of a media query, which means the rule will only be in effect at mobile widths (when the boxes stack). Otherwise, the padding on the right will be 0.

    In general, you should avoid adding inline styles to elements, because it makes it harder to override if you need to in the future. You could have just used a rule like the one above to add padding-left to all of the paragraphs in the text widget.

    Thread Starter wcushen

    (@wcushen)

    Thank you very much!

    I have applied the left indent in one go in the Visual Editor to all paragraphs and not individually. Your code has saved me a lot of trouble thank you very much!

    Many thanks,
    W

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Right indent text’ is closed to new replies.