Replicating renew 01

Support
#1

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!!

#2

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.

#3

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

#4

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

#5

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?

#6

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

#7

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

#8

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

#9

Perfect. Thanks, Paul.

#10

You’re welcome! :slight_smile:

#11

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