Text blocks – Quotes: Mobile view

  • Fiona

    (@feesplacegooglemailcom)


    6 years, 2 months ago

    I’ve got some images of what I mean but I can’t see anywhere to add them on here. Basically, you will notice when you visit my website on a mobile the quotes (in pink) appear to be long and centred and really do not look good. Whereas when you are looking at them on a laptop or tablet they look fine. Is there any way that I can adapt them for the mobile version so that it is actually readable. Without the option to add an image here the best I can demonstrate it is they look like this:

    “I
    first
    read Fion
    a’s boo
    k “Ho
    w to Wor
    k from…”

    It looks ridiculous! How can I change it? Bearing in mind, a lot of people will be visiting the site on a mobile.

    • This topic was modified 6 years, 2 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Developing with WordPress topic

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • mark l chaves

    (@mlchaves)

    6 years, 2 months ago

    Hi @feesplacegooglemailcom,

    It looks like you are in the middle of trying things out.

    The first time I inspected your code I saw that your blockquotes has a ridiculously wide left and right padding for mobile, e.g., 110px. I would change that to maybe half that like 55px.

    Your CSS would like something like this if you are still using those pink style quotes.

    
/* Decrease blockquote side padding for small devices. */
media screen and (max-width: 500px) {
  blockquote {
    padding-left: 55px; /* Use !important as needed. */
    padding-right: 55px; /* Use !important as needed. */
  }
}

    How to add custom CSS to WordPress.

    Good luck!

Viewing 1 replies (of 1 total)

The topic ‘Text blocks – Quotes: Mobile view’ is closed to new replies.