Help with css width on desktop vs. mobile

This html container looks ok on a desktop screen, but pretty bad on the mobile screen. The mobile view shows the containers at width:24.6%. Is there a simply addition to have the mobile view ignore the width here:

<div class="col-md-3 col-sm-6 no-padding-mobile-left" style="padding: 4px; border: .1em solid #323232; margin:1px 1px 1px 3px; width:24.6%;">

any help is appreciated

You need to use CSS media queries that change the width from 24.6% to 100% at an appropriate point. For example:

@media ( max-width: 600px)
 {  #yourDiv { width:100%; }      
1 Like

It appears from your classes that you are using bootstrap, so why are you also using inline styles? You need to have the styles in the CSS in order to use media queries.

1 Like

As TechnoBear said above the bootstrap classes will do what you want by default as long as you don’t interfere with them.

These classes:

col-md-3 col-sm-6

The above will essentially create 4 columns on desktop and 2 columns on tablets and 1 column on mobile. That’s what the classes were designed for.


Your class and style attributes are essentially a contradiction, where the style will override much of the css from the class.

It is documented what these classes do regarding width, which alters with queries.
But in style you have width:24.6% which will override those width rules and queries.

I can pretty much guess what this class does, but.

…will override that.

So why are the classes even there if you are going to negate them with inline styling?

If you are going to use Bootstrap, then use Bootstrap and drop the inline styles, you can always add a custom css with your own styles to tweak things, inline is not the way.

Or if you don’t want to use Bootstrap (which this looks like, since you override what Bootstrap does), still drop the inline styles, as they are a nightmare to maintain and don’t work with media queries.


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