CSS vs Design For Multi Screen

[guybower1]

Hi

I am just curious as to the general consensus on this.

I initially built my site in Cornerstone with the screen at the largest it could be. All looked fine, but of course, on smaller screen sizes, adjustments needed to be made to CSS to alter things. I am finding that 12 months down the track, the CSS is pretty cluttered with media queries all over the place and more often than not !important needing to be used to override something previous.

I just trialled taking on of my pages and adding duplicate sections of pretty much everything, sometimes more than one duplicated. I then changed the screen size and altered the sections to match the screen size. I did this repeatedly and then hid certain sections based on screen size.

Doing things this way seems to mean far less media queries to adjust elements in CSS.

I am just interested if this is a feasible way to go about reducing the clutter in my CSS and also whether anyone else adopts this style of way to design their pages

cheers

[christopher]

Hi there,

You can not rule out both methods. You just need to find a trade off between using those methods.

The best ultimate way is CSS of course as it does not add duplicates in the code. But sometimes the section hide/show functionality is inevitable and way better than CSS regarding the time you will spend to fix things around.

I suggest that for easy tweaking stuff use CSS, and for complicated sections use the Hide/Show functionality.

Thank you.

[guybower1]

Hi Chrstopher

Thanks so much for your reply

That makes sense. For the pages I am currently working on, it was actually quicker to go the duplicate and hide/show route, as to determine all of the correct class IDs and experiment would have taken longer. it is working fine this way, but I will bear in mind what you say about a trade off

cheers