Help Responsive code for mobile/desktop?

[jminily]

I've forgotten a lot of bbcode since being away, and this one is bugging me; there was code I used a while back that changed the design of code when the size of the browser changed (i.e. from desktop to mobile). I would have a 700px width box, that would be replaced with a 300px box when on mobile (or other differences like the colour would change, or image placement etc). I can't even remember if it was script related (actually changing the class applied to the div) or if it was a CSS-type code like [class=box status=hover].

Does anyone have any suggestions/ideas for what it might be?

 

[Idea]

Don't use pixels, use percentages.

Coding based on pixels is read the same on mobile or desktop, because the size of a pixel doesn't change. Using percentages, on the other hand, is affected by the size of the screen. It isn't a 1-1 comparison, unfortunately, but you should get the hang of it with a little experimenting.

 

[jminily]

Don't use pixels, use percentages.

Coding based on pixels is read the same on mobile or desktop, because the size of a pixel doesn't change. Using percentages, on the other hand, is affected by the size of the screen. It isn't a 1-1 comparison, unfortunately, but you should get the hang of it with a little experimenting.

I remember there being an explicit way to make something changed based on max-width or height, as in the colour or placement of something. Almost like applying a new class via script to an existing div and removing the previous class at the same time. But I don't recall whether it was a script or not.

Percentages would work, but not how I want them to. They work for resizing the overall scale and such, but not for repositioning or placement or changing colour/text based on other factors.

Thank you though!

 

[Alteras]

you're thinking of [class name="CLASS" maxWidth=MAXWIDTH minWidth=MINWIDTH]

 

[jminily]

you're thinking of [class name="CLASS" maxWidth=MAXWIDTH minWidth=MINWIDTH]

Yess! Thank you so much!