zerif lite page not responsive after custom css

  • Resolved rafaysansari

    (@rafaysansari)


    9 years, 2 months ago

    Hi Zerif Lite Team,

    I’m using a Zerif Lite child theme on my website, BloggInc.

    I changed the default page template “Blog template with large images” using Custom CSS to lessen the width of blog posts. Here’s a sample post. (Note how the content is set to be displayed at the center of the page 735px instead of the default full-width).

    Somehow, making this alteration doesn’t allow the blog posts to be responsive (the text is cut off on mobile devices).

    Can you please tell me how I can fix this error. The rest of the pages are responsive. Only single-post type pages are not.

    This is the CSS I used:

    .single-post .content-area {
    width: 735px;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    }

    Thank you!

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

  • Hi @rafaysansari

    Please modify your CSS as:

    .single-post .content-area {
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    }

    Hope it works
    Thank You!

    Thread Starter rafaysansari

    (@rafaysansari)

    Hi @sanjog,

    Thank you for your response. It does indeed make the blog posts responsive. However, I would like to keep the width at 735px (instead of full-width). Is there any way I can retain the 735px (reduced width) AND keep the blog post responsive?

    Thank you!

    You can try this way.Using pixel create trouble in responsive view,so you better use percentage.

    .single-post .content-area {
    margin: 0 auto;
    width: 75%;
}

    Thank you!

    Thread Starter rafaysansari

    (@rafaysansari)

    Hi @romeeta,

    Thank you so much! Works like a charm.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘zerif lite page not responsive after custom css’ is closed to new replies.