Home Forums Product Support Kerouac Responsiveness – not on iPhone

Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • #2991
    Joakim Larsen
    Participant

    How can I make the Kerouac theme responsive on iPhone?
    It displayed terribly.

    #3024
    Jenny @ Aesop
    Keymaster

    Hi Joakim.

    I do not have an iPhone to test on but I can use the Chrome emulator. Will you please provide me with a link to your site so I can view it?

    Thanks!

    #3156
    Jenny @ Aesop
    Keymaster

    Please let me know if you still need assistance with this topic, otherwise I will mark it as resolved in a few days. Thanks!

    #3161
    Joakim Larsen
    Participant

    http://venturepress.dk/ethiopia/
    The second paragraph does not display as the first – but in italic, different margins, both right and left, smaller line length, smaller line spacing…
    The bread text displays with two or three (when small words per line) like this:

    Today is
    Today
    A short story
    by Joakim
    Larsen

    Sam is a
    young man
    of 24. He is
    not supposed
    to be in
    Djibouti. In
    ….

    and so it continues. That is of course not OK.

    #3180
    Jenny @ Aesop
    Keymaster

    The site is displaying narrow on iPhone because it is set to display narrow on a normal pageview (looks like you have it set to 40%). After allocating for mobile browsers, the 40% width on an iPhone looks smaller, even though it’s about the same as on a regular pageview.

    On the page you linked, I don’t see anything displaying in italics, but the text in the grey box is different (margins, etc) because it’s a caption, not text/content.

    The text with the extra spacing is actually justified. The difference between that paragraph and the one at the top is that the top paragraph is actually in < p > tags whereas the next is not in < p > tags. I recommend taking a look at the section of text in the HTML editor on the post (text starts with “with it’s significant range in altitude”).

    I can’t find the text you’re referring to. Looks like it’s been changed. Let me know what’s a better text to look at and I’ll definitely do it. Thanks.

    #3327
    Joakim Larsen
    Participant

    I don’t quite understand; to me the text takes up much less space than 40%.
    And the text changes in the middle of a chapter – as I explained previously.
    I never had this problem with my other WP site.
    Wkr
    Joakim

    #3329
    Joakim Larsen
    Participant

    The site you sent me “hurts-so-good” displayes well on iPhone.
    Mine still looks very bad, way too narrow, changes font, size, margins more than once.
    Wkr.
    Joakim

    #3338
    Jenny @ Aesop
    Keymaster

    The text ultimately takes up less than 40% due to padding/margins, but if you change it to something like 80%, you’ll see how much of a difference it makes. The narrow widths get quite small due to the padding/margins.

    I just checked https://venturepress.dk/ethiopia/ on an iPhone5 and everything looks great minus the small content width that’s set (40%). I don’t see any italics, justified text, text changing in the middle of a chapter, etc. Did you change something?

    #3360
    Joakim Larsen
    Participant

    Still no change… no solution… same problem…
    I feel I am wasting my time and money here.

    #3375
    Jenny @ Aesop
    Keymaster

    I know we’ve worked out the gallery issue in your other post. What can I do to help you with this one? Have you tried making the content width a little larger (like 80%)?

    #3376
    Joakim Larsen
    Participant

    I don’t want a line length of 80% – it is too long for reading.
    So i don’t know what to do for the Pads and Smartphones…
    On my other web site – also in WP – I have similar line length (around 11-12 cm)
    and it displays well on Pads and Smartphones.
    Wkr
    Joakim

    #3408
    Jenny @ Aesop
    Keymaster

    What I don’t understand is why it displays okay for me but not okay for you. Are you able to take a screenshot of what you’re seeing, and the device(s) you’re using so I can compare?

    #3421
    Joakim Larsen
    Participant

    Hi Jenny, I have sent you two photos of the responsiveness (or lack of) on my phone.
    The line length is set to 50% which is gives a line length of around 12-15 cm – good for reading on a computer screen.
    But as you can see it is no good on the phone.
    I have seen the exact same problem on pads.
    With kind regards
    Joakim

    #3465
    Jenny @ Aesop
    Keymaster

    Hi Joakim. Because of the 50% width, and also because each component has padding/margins, the text on mobile is taking up less than 50% of the space. The easiest way to solve this is with CSS.

    The content component has an inner left & right padding of 3rem. If those values are changed to 0, the content is now 50%.

    I recommend using a plugin like Simple Custom CSS to save your CSS (https://wordpress.org/plugins/simple-custom-css/).

    If you’re not familiar with how to use CSS inspector in Chrome, it’s super easy to use and will make finding the css classes that you’ll need when you want to change the design. Here’s a great in-depth article about this: https://www.html5rocks.com/en/tutorials/developertools/part1/

    Once you’ve installed Simple Custom CSS (link above), add the following CSS to change the left and right padding to 0:

    
    #primary .aesop-content-comp-inner {
      padding-left: 0;
      padding-right: 0;
    }
    

    This will make the content appear at 50% without having to change your content width to something larger.

    #4616
    Paul Smith
    Participant

    Thanks Jenny. I’ll give it a try.
    (Sorry – hijacked – linked to this from a similar question I had!)

    • This reply was modified 7 years ago by Paul Smith.
    #4618
    Jenny @ Aesop
    Keymaster

    It’s okay Paul 🙂

Viewing 16 posts - 1 through 16 (of 16 total)
  • You must be logged in to reply to this topic.