Content Width on Mobile

Front page Support Forums Ikebana Theme Support Content Width on Mobile

Tagged: 

This topic contains 3 replies, has 2 voices, and was last updated by  satori 2 weeks, 4 days ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #26217

    mike dias
    Participant

    Hello – How do I change the content width on mobile? On the desktop it looks very clean. On mobile everything looks like its only using half the available space. I have the background color – dark grey – then the blog post color grey – then the text. The padding on each – but especially on the text and images is too much. Please see http://mike-dias.com/ on mobile. Thank you

    #26515

    satori
    Member

    Hey Mike,
    please try adding this snippet to the “Style: Add Custom CSS” tab of the Theme Options panel:

    #blog-header h1 { word-break: break-word; }
    @media only screen and (max-width: 724px) {
    #blog-header { padding: 20px 20px 10px 20px !important; }
    .header-desc { padding: 0 20px !important; }
    }
    

    Cheers,
    Andrii / Satori Studio

    #26587

    mike dias
    Participant

    Thank you. That solved it for blog posts and category descriptions but I still have the same padding problems for Pages.

    On some of my pages, I have embedded blog posts. The embedded blog posts on the pages are highly indented. Is there another snippet that I can add?

    Thank you

    #26677

    satori
    Member

    Apart from the above code, please try also adding the following line:

    @media only screen and (max-width: 724px) {
    .archive .post { margin: 0 !important; }
    }
    

    Cheers,
    Andrii / Satori Studio

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.