Specific CSS on only <SM bootstrap 5, 100% on small screens, custom width on > sm

Styling (CSS)
1

Hi
On a mobile screen (<sm) I want a 100% width, say: something like max-width:100%
But as soon the screen is larger then SM I don’t want this. So on bigger screens I want to use another CSS class.

I do not want to use the bootstrap 5 “container-sm” since I gave the user the solution to edit the width in the customizer section.
For the Customizer Section I added a field for a CSS rule.
This CSS rule can then change the max-width. This works perfect.

But for a small screen the max-width should not be used, must always be the full width, only above >sm

Hope my description is clear enough.
Thanks
Hans

2

I solved it like this:
a simple media query:

In custom.php

<?php
    /* 
    Use this file to add custom PHP code to your theme or plugin 
    */

function mytheme_customize_css()
{
?>

<style type="text/css">
@media (min-width: 768px) {   
        .cover-container{ max-width: <?php echo get_theme_mod('width_main_screen', "100"); ?>%; }
}
</style>

<?php
}
add_action( 'wp_head', 'mytheme_customize_css');
    ?>

In Pinegrow I placed an Editable Field (Customizer Field):

image
image1322×413 19.6 KB

I did put this on the DIV, the first one after the Site content div.

The section “homepagefoto” is of course a Customizer Section defined in PG.

2 Likes