Replicating renew 01

Hi there,

Wondering how I can get renew 01 style (as on this demo page http://demo.theme.co/renew-1/) on to my blog. What I’m after is a page stuck on another pack, so that header, content and footer area don’t have to be read across the whole width of the screen.

Any ideas?

Thanks in advance!!

Hello @overlooked,

Thanks for asking. :slight_smile:

If you are using a different stack then as of now you can’t selectively import demo contents. If you want to replicate look and feel of Renew 1 then you can import same demo content. However, if you just want to minic Renew 1 layout then you can select Blank - No Container | Header, Footer template and under X > Launch > Options > Layout and designs > Select Boxed Site Layout. Let the site max width be 1000px, site width (%) 86.

Let us know how it goes.

Thanks.

Thanks, Prasant, that works really well. Is there any way I can preserve the boxed layout on smaller screens, such as iPad and iPhone?

Hi There,

Making website Block layout in mobile device only need custom css.

Please add following css to your custom css.

@media (max-width: 767px)
.site {
    width: 85% !important;
    max-width: 85% !important;
}

Let us know how it works!

Thanks

Thanks, Prasant, I’ll try that. Two questions. If I use this custom css, will it mean that I now get box layout on any size screen? Also, since applying the box layout, the images in the header containers seem has lost some resolution. Can I do anything to make these images sharp again?

Hi,

Sorry my colleague missed the breackets for @media.

Kindly change the code to this.

@media (max-width: 767px) {
.site {
    width: 85% !important;
    max-width: 85% !important;
}
}

That code will only take effect for screen width lower than 768px.

Thanks

Thanks, Paul. This works well at small screen sizes e.g. on a phone, but not at medium sizes. So on an ipad the boxed layout does not appear.

Is there any coding that will preserve the boxed layout at all screen sizes?

William

HI,

You can change 768px to a higher number if you want it to take effect in ipad.

or you can remove @media to make it take effect in any screen sizes including desktop.

.site {
    width: 85% !important;
    max-width: 85% !important;
}

For more information regarding media queries, kindly refer to the link below

Thanks

Perfect. Thanks, Paul.

You’re welcome! :slight_smile:

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.