Centering content on mobile

  • Resolved prandrews73

    (@prandrews73)


    8 years, 5 months ago

    I’m very happy with the 2016 theme but there’s one issue nagging me. On this site https://www.devonmathstuition.co.uk/

    The image in the content area remains right aligned when the view shrinks to one column, giving a lop-sided appearance. Since the image has a class of .alignright on it, I don’t know how to fix this.

    Should I use a media query on the child theme’s style.css? If so, what should it be? And if not, what other solutions are there please?

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

  • You have a large right margin being applied to your entry-content class at mobile widths, add this to your Child Theme style.css file, or using a Custom CSS plugin.

    @media only screen and (max-width: 900px) {
    .entry-content { 
        margin-right: 7.6923%;
    }
}

    You can adjust your alignright class at mobile widths to become centralized, like so:

    @media only screen and (max-width: 500px) {
    .alignright {
        float: none;
        margin: 0 auto;
        display: block;
    }
}

    Hope this helps.

    Thread Starter prandrews73

    (@prandrews73)

    Great thanks! Just got round to applying this fix.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Centering content on mobile’ is closed to new replies.