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

**URL:** <https://forum.pinegrow.com/t/specific-css-on-only-sm-bootstrap-5-100-on-small-screens-custom-width-on-sm/9004>\
**Category:** Styling (CSS)\
**Created:** [July 14, 2024, 10:54am UTC](https://forum.pinegrow.com/t/specific-css-on-only-sm-bootstrap-5-100-on-small-screens-custom-width-on-sm/9004 "2024-07-14T10:54:43Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![mazzel](https://avatars.discourse-cdn.com/v4/letter/m/58956e/32.png) [@mazzel](https://forum.pinegrow.com/u/mazzel)\
**Post date:** [July 14, 2024, 10:54am UTC](https://forum.pinegrow.com/t/specific-css-on-only-sm-bootstrap-5-100-on-small-screens-custom-width-on-sm/9004/1 "2024-07-14T10:54:43Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![mazzel](https://avatars.discourse-cdn.com/v4/letter/m/58956e/32.png) [@mazzel](https://forum.pinegrow.com/u/mazzel)\
**Post date:** [July 20, 2024, 7:23am UTC](https://forum.pinegrow.com/t/specific-css-on-only-sm-bootstrap-5-100-on-small-screens-custom-width-on-sm/9004/2 "2024-07-20T07:23:35Z")

</div>

I solved it like this:  
a simple media query:

In custom.php

```auto
<?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](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/8/8b616edb1e27747ae992b7703d67f4e95a9d2434.png)

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.