Styling website for different screen sizes with Bootstrap 3

css, html, twitter-bootstrap-3, typo3, wcag2.0

Solution

Why are you using two different wrappers for mobile/desktop instead using CSS to style them individually:

<div id="sidebar" class="col-sm-12 col-md-3">
    <!-- Inner Classes and Stuff -->
    <!-- IMPORTANT: Div auto-inserted by Typo3 -->
</div>

#sidebar {
    /* Mobile/Tablet styles (xs, sm) */
}
@media (min-width: 991px) {
    #sidebar {
        /* Tablet/Desktop styles (md, lg) */
    }
}

This is the mobile first variant.

Problem

I am using the following method to style my website for different screen sizes. ``` <div id="sidebar" class="col-md-3 hidden-xs hidden-sm"> <!-- Inner Classes and Stuff --> <!-- IMPORTANT: Div auto-inserted by Typo3 --> </div> <!-- sidebar --> <div id="sidebar_mobile" class="col-xs-12 hidden-md hidden-lg"> <!-- Inner Classes and Stuff --> <!-- IMPORTANT: Div auto-inserted by Typo3 --> </div> <!-- sidebar --> ``` I then define different styles that I need for #sidebar and #sidebar_mobile in my CSS. This leads to two problems: - Repetition (there are many shared properties between #sidebar and #sidebar_mobile). - Duplicate IDs - The divs that are automatically inserted by Typo3 (Raw HTML content inserted via Typo3 backend) end up having the same ID (inside #sidebar and #sidebar_mobile). This fails WCAG 2.0 AA and I need my website to pass this. I would like to know if there is a better way of going about things in this case. What would be a better solution

Original source