Container width in percent instead of pixels

  • Resolved rodario

    (@rodario)


    3 years ago

    Hi

    This is a sitewide question but it’s visible on the linked page.

    I’ve chosen a container width of 1600px on desktop and left the defaults for the other formats, and a three column layout for my posts that works well on my screen.

    It would look weird on a 1600px screen though, as well as on a 4k screen. As for phones, it looks good on mine, but I’m not sure if some of the bigger models will have some unnecessary white space along the sides because of the container width.

    The columns themselves are pretty messed up on Tablets, though I’ll continue to de-prioritize that ~1% visitor segment.

    What would be great would be being able to set something like Container width: 95% for under 1920px screens, 70% for 1920 and over. That also takes care of all three device classes in one setting.

    Thanks, and have a great day ??

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • luciamarinescu

    (@luciamarinescu)

    Hi @rodario!

    There is no option to set the Container size at a certain percentage for a certain type of device in the Customizer, but it should be possible to do this by adding the code below in the Additional CSS section.

    @media (max-width: 1920px){
.container.single-post-container {
    width: 95% !important;
}
}

@media (min-width: 1921px){
.container.single-post-container {
    width: 70% !important;
}
}

    I hope this helps!

    Have a nice day!

    Thread Starter rodario

    (@rodario)

    Thank you for this workaround ??

    luciamarinescu

    (@luciamarinescu)

    I’m glad I could help!

    Thread Starter rodario

    (@rodario)

    Hey @luciamarinescu

    Sorry, I only got around to trying the solution now and unfortunately it’s not quite what I had in mind. If I’m not mistaken, this only affects the width of the post content in relation to the container, which is still set in stone (in an absolute number of pixels).

    I’d like the container width itself to be a percentage of the screen, if possible.

    Thanks and best wishes

    Mat

    (@mateithemeisle)

    Hello @rodario ,

    Thank you for your reply!

    If you wish the entire container to have that behavior then you can use the code provided above by @luciamarinescu and leave only the .container class active.

    Here is the new code for your needs:

    @media (max-width: 1920px){
.container {
    width: 95% !important;
}
}

@media (min-width: 1921px){
.container {
    width: 70% !important;
}
}

    Thank you and have an amazing day!

    Thread Starter rodario

    (@rodario)

    Hey, @mateithemeisle

    Thanks, that’s exactly what I was looking for ?? Now my site should be ready for 4 and above.

    Have a great day too

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Container width in percent instead of pixels’ is closed to new replies.

Tags