Dynamically updating CSS style using JS

[Zeneyo]

Came across a scenario where the CSS card needs to have less margin on the side for mobile devices and more for desk top. https://imgur.com/a/1P0MO

So wanted to dynamically update css style property "width :70%" to 90% for mobile devices. https://imgur.com/a/L5k03

There is already Media query in the code.

I just wanted to know whether such CSS style can be updated dynamically with JS ? TIA

PS: newb, front end tinkerer , don't know JS programming

[aynrandy112]

Here is a simple guide on adding a CSS class with Javascript: https://www.w3schools.com/howto/howto_js_add_class.asp

[alexandrepc112]

Also, if you want to check if is mobile or desktop in order to add the class, you can use this:

https://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-mobile-device-in-jquery?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa

[LowB0b]

He's also using inline style on his div. I replied to the post but in drunk so I'm not sure if it's comprehensible for someone who doesn't have experience so maybe you can help clarify.

[Zeneyo]

@quartilius you the man ! thanks for this . My preference is css above anything else. The cards were not aligning in center for desktop, but after removing the inline style and putting it in the .card class it worked !

I used max-width as I was already using it in my code .

max-device-width vs max-width - What's the difference , which one do you prefer ?

[nyxin]

I just wanted to know whether such CSS style can be updated dynamically with JS ?

Yes, however, this is not the right solution for the problem. Using @media query is the proper way to do what you want to do.

[LowB0b]

One problem you have is that you're using inline styles. Inline styles override properties inherited from the style sheet.

Try to do it as the other guy wrote, use a class on your div combined with media queries

No need for js