Fullwidth page layout isn't responsive

kesch
asked 10 years ago

Hey devs,
I implemented the fullwidth page layout to my site as described in this topic: http://designwall.com/question/how-to-add-a-new-page-layout-type/, so far, so good.
But the fullwidth page layout seems not to be responsive. If I add some example shortcodes from the typography layout like the show grid it’s not adjusted to smaller screens.
Hope you can help! Cheers,
KeSch

2 Answers

DominicStaff
answered 10 years ago

Hi my friend, to resolve this issue, please replace the following code:

     <style>
.page-template-fullwidth-php .primary-inner {
    width: 950px;
}
</style>

With new Code:

      <style>
.primary-inner {     margin-right: 20px; }
</style>

Hope the code above can help you out. Let us know how that goes!

kesch
replied 10 years ago

Thanks mate, your support is really great!

For the sake of completeness I deleted the line for the .primary-inner, so the margin is on the left and right side 20px. Otherwise it would 20px on the left and 40px on the right side.

Cheers,
Kevin

kesch
replied 10 years ago

Ok sorry, I have to correct me. The fullwidth layout work quite well with the solution above on big screens as well as small screens. But the index page with all the blog entries i now too wide and covers the sidebar on the right side.

I get only one of the two layouts to work as it should. If the fullwidth layout looks good the standard layout breaks out. And if the standard layout works fine the fullwidth layout isn’t responsive and/or it has the same width as the standard layout.

Hope you can find another solution. Best regards, Kevin

DominicStaff
answered 10 years ago

You can replace the following code:

    <style>.primary-inner {     margin-right: 20px; }</style>

With new code:

 <style>
.page-template-fullwidth-php .primary-inner {
    margin-right: 20px;
}
</style>

Regards,

kesch
replied 10 years ago

Yes, this works. Thank you so much. 😉