Clean CSS: Utilisez divs dans gridsystem pour le bureau, en dehors de gridsystem pour mobile

Question

Je suis en train de faire une ligne sous ma rubrique qui est de 4 couleurs différentes.

pour le bureau Je veux qu'il aille avec ma grille réactive: pour mobile Je veux aller pleine largeur:

<header> 
<div class="container"> 
    <div class=" row"> 
     <div class="col-3 center"> 
      <img src="assets/arteveldelogo.png"> 
     </div> 
     <div class="col-9 hidden-sm right"> 
      <h1 class="font-heavy"> 
       Beeldbank Mediatheek Mariakerke 
      </h1> 
      <ul class="font-heavy"> 
       <li><a href="#"> Home </a></li> 
       <li><a href="#"> Collecties </a></li> 
       <li><a href="#"> Tentoonstellingen </a></li> 
       <li><a href="#"> Klassen </a></li> 
      </ul> 
     </div> 
    </div> 
</div> 
     <div class="line orangeline"></div> 
     <div class="line blueline"></div> 
     <div class="line magentaline"></div> 
     <div class="line greenline"></div> 
</header> 

Alors mes lignes ar en dehors de mon gridsystem en ce moment, et fonctionne bien pour ma conception mobile, mais pas la façon dont je les veux pour mon bureau. Quand je place les lignes dans un .row qui est dans un .container, elles fonctionnent pour desktopdesign, pas pour la conception mobile. Mon Sass est

.line{ 
margin-top: 1rem; 
display:block; 
float:left; 
width: 25%; 
} 
.orangeline{ 
border-bottom: 1px solid $orange; 
@media only screen and (min-width:45em){ 
    border-bottom: 4px solid $orange; 
} 

(ligne bleue, magentaline & Greenline sont tous les mêmes, mais avec leur propre colorvariable)

Y at-il une manière propre à faire est (en utilisant seulement html et css)? Merci!

Answer 1

Avez-vous envisagé d'utiliser un gradient linéaire multi-stop? Le browser support est excellent et cette approche simplifie votre HTML à un seul élément.

:root { 
 
    --orange: #EE9900; 
 
    --blue: #00AACC; 
 
    --magenta: #CC0077; 
 
    --green: #BBCC00; 
 
} 
 

 
.line { 
 
    height: 3px; 
 
    background: linear-gradient(
 
    to right, 
 
    var(--orange) 25%, var(--blue) 25%, 
 
    var(--blue) 50%, var(--magenta) 50%, 
 
    var(--magenta) 75%, var(--green) 75% 
 
); 
 
} 
 

 
@media screen and (max-width: 400px) { 
 
    .line { 
 
    height: 1px;  
 
    } 
 
} 
 

 
/* No support for CSS variables? Fallback time */ 
 
@supports not(--test: green) { 
 
    .line { 
 
    background: linear-gradient(
 
     to right, 
 
     #EE9900 25%, #00AACC 25%, 
 
     #00AACC 50%, #CC0077 50%, 
 
     #CC0077 75%, #BBCC00 75% 
 
    );  
 
    } 
 
}

<div class="line" role="presentation">

https://jsfiddle.net/dx9gyn2s/