Mobile vs desktop layout

  • Resolved Imagejofp

    (@jofp)


    5 years, 12 months ago

    Hello,

    Hoping someone here can help me. I’ve recently launched my own site and struggling a bit with the different appearance of desktop vs mobile.
    Site: jfpeditorial.com
    Theme: vogue

    I’m pretty happy with the desktop layout of the homepage, disregarding some tweaks to the wordy first content block, but the way the content responds to mobile doesn’t look great.

    Specifically, there’s an image block LHS and text alongside it on the right, which on desktop looks OK. But on mobile, the text goes very skinny and the image is stacked underneath. I understand some changes to the layout are needed when it scales down and am happy with the image being stacked underneath. But, how do I make the text full width on mobile even though it isn’t on desktop?

    I’d really appreciate any advice on how to fix this, even if ultimately a different layout is needed 🙁

    Is there a way or plugin I can use to see how the content may look on different screen sizes before I publish it?

    Thank you in advance 🙂

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

Viewing 8 replies - 1 through 8 (of 8 total)
  • ImageMatias Mann

    (@developress)

    5 years, 12 months ago

    Hi @jofp , you can use the preview button in Gutenberg and the resize the browser so the theme will load the mobile style. That way you can see how the content will look before publishing.

    About the full width text, can you provide a link to get an idea of how it looks?

    • This reply was modified 5 years, 12 months ago by ImageMatias Mann.
    Thread Starter Imagejofp

    (@jofp)

    5 years, 11 months ago

    Hi @developress Thank you for that 🙂

    On the homepage, underneath ‘Editorial Services’ and a quotation CB, there are 2 x CBS: image left hand-side and paragraph. I am happy with how these appear on desktop.
    But on mobile, the image is tiny and the paragraph copy becomes all skinny. Also the ‘Contact me button’ is affected on my screen size.

    I guess, what I wonder is, is there a way to alter how the content responds on different screen sizes? Or actually, do I just need to rethink the layout to suit all screen sizes?

    Cheers:)

    ImageMatias Mann

    (@developress)

    5 years, 11 months ago

    That will depend on how you create the blocks on the editor.

    You can try creating a layout column so the image stacks on top when on mobile instead of showing in the same width that text.

    I would also suggest to post the question in the Vogue theme forum also: https://wordpress.org/support/theme/vogue/

    Makes sense?

    Thread Starter Imagejofp

    (@jofp)

    5 years, 11 months ago

    Thank you, I’ll try those things now!
    I appreciate it 🙂

    ImageMatias Mann

    (@developress)

    5 years, 11 months ago

    @jofp could you fix the issue?

    Thread Starter Imagejofp

    (@jofp)

    5 years, 11 months ago

    @developress yes I managed it just the other day. I found a toggle to stack the content in mobile view which has worked really well.
    Thanks for all your help

    ImageMatias Mann

    (@developress)

    5 years, 11 months ago

    Great. Good job! Would you mind setting the issue as solved? Thanks!

    Thread Starter Imagejofp

    (@jofp)

    5 years, 11 months ago

    Thanks for your help!

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

The topic ‘Mobile vs desktop layout’ is closed to new replies.