Help With Small Screen Styling

Webweaving
, , ,
1

I’m about to lose my mind. This page stacks correctly into columns on small screens, while all my color pages do not.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RAINBOW RANGE GRAPHICS</title>
    <!-- STYLE -->
    <link href="/css/style.css" rel="stylesheet" type="text/css" media="all">
    <link href="/css/tooltips.css" rel="stylesheet" type="text/css" media="all">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="icon" type="image/png" sizes="32x32" href="favicon.png">
    <!-- SCRIPTS -->
    <script src="/js/static.js" defer></script>
  </head>
  <body>
  <canvas id="bgCanvas"></canvas><canvas id="star-canvas"></canvas>
   <button class="darkToggle dark-btn">
  <i class="fa fa-moon-o"></i>
  </button>
<div class="center"> 
<div class="main-content-wrapper rainbow-border">
  
  <aside class="left-sidebar">
  </aside>
  
  <div class="content-area">
  
 
  <header class="site-header">
    <h1 class="center">
    RAINBOW RANGE GRAPHICS
    </h1>
  </header>
  
    <nav class="topbar">
    </nav>
    
    <p class="text"><span class="rb">ALL</span> of our grahics!</p>
    <div class="container-flex">
      <div class="container buttons">
        <a href="#buttons" onclick="showOnly('buttons')"><h2>Buttons</h2></a>
        
        <span data-title="Miles Nilten">
        <a href="img/member-graphics/buttons/pink_floyd_01.gif"><img src="img/member-graphics/buttons/pink_floyd_01.gif"></a>
        </span>
        
        <!-- me -->
        <span data-title="Nori Jammy">
        <a href="img/my-graphics/buttons/bite.gif"><img src="img/my-graphics/buttons/bite.gif"></a>
        </span>
        
        <span data-title="Nori Jammy">
        <a href="img/my-graphics/buttons/drain.gif"><img src="img/my-graphics/buttons/drain.gif"></a>
        </span>
        
        <span data-title="Nori Jammy">
        <a href="img/my-graphics/buttons/email me.gif"><img src="img/my-graphics/buttons/email me.gif"></a>
        </span>
        
        <span data-title="Nori Jammy">
        <a href="img/my-graphics/buttons/hello.gif"><img src="img/my-graphics/buttons/hello.gif"></a>
        </span>
        
        <span data-title="Nori Jammy">
        <a href="img/my-graphics/buttons/email.gif"><img src="img/my-graphics/buttons/email.gif"></a>
        </span>
        
        <span data-title="Nori Jammy">
        <a href="img/my-graphics/buttons/gorey.gif"><img src="img/my-graphics/buttons/gorey.gif"></a>
        </span>
        
        <span data-title="Nori Jammy">
        <a href="img/my-graphics/buttons/local alien.gif"><img src="img/my-graphics/buttons/local alien.gif"></a>
        </span>
        
        <span data-title="Nori Jammy">
        <a href="img/my-graphics/buttons/love sick.gif"><img src="img/my-graphics/buttons/love sick.gif"></a>
        </span>
        
        <span data-title="Nori Jammy">
        <a href="img/my-graphics/buttons/magic button.gif"><img src="img/my-graphics/buttons/magic button.gif"></a>
        </span>
        
        <span data-title="Nori Jammy">
        <a href="img/my-graphics/buttons/sick in the head.gif"><img src="img/my-graphics/buttons/sick in the head.gif"></a>
        </span>
        
        <span data-title="Nori Jammy">
        <a href="img/my-graphics/buttons/sing the guestbook.gif"><img src="img/my-graphics/buttons/sing the guestbook.gif"></a>
        </span>
        
        <span data-title="Nori Jammy">
        <a href="img/my-graphics/buttons/the dark.gif"><img src="img/my-graphics/buttons/the dark.gif"></a>
        </span>
        
        <span data-title="Nori Jammy">
        <a href="img/my-graphics/buttons/the water calls.gif"><img src="img/my-graphics/buttons/the water calls.gif"></a>
        </span>
        
        <span data-title="Nori Jammy">
        <a href="img/my-graphics/buttons/watch out.gif"><img src="img/my-graphics/buttons/watch out.gif"></a>
        </span>
        
        <span data-title="Nori Jammy">
        <a href="img/my-graphics/buttons/when you wish.gif"><img src="img/my-graphics/buttons/when you wish.gif"></a>
        </span>
        
        <span data-title="Nori Jammy">
        <a href="img/my-graphics/buttons/y'all means all.gif"><img src="img/my-graphics/buttons/y'all means all.gif"></a>
        </span>
        
        <span data-title="Nori Jammy">
        <a href="img/my-graphics/buttons/DANCE.png"><img src="img/my-graphics/buttons/DANCE.png"></a>
        </span>
        
        <span data-title="Nori Jammy">
        <a href="img/my-graphics/buttons/water.gif"><img src="img/my-graphics/buttons/water.gif"></a>
        </span>
        
      </div>
      
      <div class="container blinkies">
        <a href="#blinkies" onclick="showOnly('blinkies')"><h2>Blinkies</h2></a>
        
        <!-- Sweet Satellite -->
        
         <span data-title="Sweet Satellite">
        <a href="img/member-graphics/blinkies/card-captor-small.gif"><img data-title="Sweet Satellite" src="img/member-graphics/blinkies/card-captor-small.gif"></a>
        </span>
        
        <span data-title="Sweet Satellite">
        <a href="img/member-graphics/blinkies/all-hail-shadow.gif"><img src="img/member-graphics/blinkies/all-hail-shadow.gif"></a>
        </span>
        
        <span data-title="Sweet Satellite">
        <a href="img/member-graphics/blinkies/black-arms.gif"><img src="img/member-graphics/blinkies/black-arms.gif"></a>
        </span>   
        
        <span data-title="Sweet Satellite">
        <a href="img/member-graphics/blinkies/shadow-blank.gif"><img src="img/member-graphics/blinkies/shadow-blank.gif"></a>
        </span>
        
        <span data-title="Sweet Satellite">
        <a href="img/member-graphics/blinkies/shadow-2-blank.gif"><img src="img/member-graphics/blinkies/shadow-2-blank.gif"></a>
        </span>
        
        <span data-title="Sweet Satellite">
        <a href="img/member-graphics/blinkies/electric-weekend-small.gif"><img src="img/member-graphics/blinkies/electric-weekend-small.gif"></a>
        </span>
        
        <span data-title="Sweet Satellite">
        <a href="img/member-graphics/blinkies/have-some-fun-small.gif"><img src="img/member-graphics/blinkies/have-some-fun-small.gif"></a>
        </span>
        
        <span data-title="Sweet Satellite">
        <a href="img/member-graphics/blinkies/let's-party-small.gif"><img src="img/member-graphics/blinkies/let's-party-small.gif"></a>
        </span>
        
        <span data-title="Sweet Satellite">
        <a href="img/member-graphics/blinkies/you're-too-slow.gif"><img src="img/member-graphics/blinkies/you're-too-slow.gif"></a>
        </span>
        
        <span data-title="Sweet Satellite">
        <a href="img/member-graphics/blinkies/sonic-blank.gif"><img src="img/member-graphics/blinkies/sonic-blank.gif"></a>
        </span>
        
        <!-- Adelina/Fish Blob -->
        
        <span data-title="Adelina/Fish Blob">
        <a href="img/member-graphics/blinkies/Dave Bayley.gif"><img data-title="Adelina/Fish Blob" src="img/member-graphics/blinkies/Dave Bayley.gif" width="150"></a>
        </span>
        
         <span data-title="Adelina/Fish Blob">
        <a href="img/member-graphics/blinkies/ezgif-787793db71460eaf.gif"><img data-title="Adelina/Fish Blob" src="img/member-graphics/blinkies/ezgif-787793db71460eaf.gif" width="150"></a>
        </span>
        
         <span data-title="Adelina/Fish Blob">
        <a href="img/member-graphics/blinkies/ezgif-7bb42dfad9fd612b.gif"><img data-title="Adelina/Fish Blob" src="img/member-graphics/blinkies/ezgif-7bb42dfad9fd612b.gif" width="150"></a>
        </span>
        
         <span data-title="Adelina/Fish Blob">
        <a href="img/member-graphics/blinkies/ezgif-85c962817fd1524f.gif"><img data-title="Adelina/Fish Blob" src="img/member-graphics/blinkies/ezgif-85c962817fd1524f.gif" width="150"></a>
        </span>
        
        
        <!-- finny -->
        <span data-title="finny">
        <a href="img/member-graphics/blinkies/blinkie_32leaves.gif"><img data-title="finny" src="img/member-graphics/blinkies/blinkie_32leaves.gif"></a>
        </span>
        
        <span data-title="finny">
        <a href="img/member-graphics/blinkies/blinkie_mcs.gif"><img src="img/member-graphics/blinkies/blinkie_mcs.gif"></a>
        </span>
        
        <span data-title="finny">
        <a href="img/member-graphics/blinkies/blinkie_elliott.gif"><img src="img/member-graphics/blinkies/blinkie_elliott.gif"></a>
        </span>
        
        <span data-title="finny">
        <a href="img/member-graphics/blinkies/blinkie_nadasurf.gif"><img src="img/member-graphics/blinkies/blinkie_nadasurf.gif"></a>
        </span>
        
        <span data-title="finny">
        <a href="img/member-graphics/blinkies/blinkie_titanfall2.gif"><img src="img/member-graphics/blinkies/blinkie_titanfall2.gif"></a>
        </span>
        
        <span data-title="finny">
        <a href="img/member-graphics/blinkies/blinkie_watchdogs.gif"><img src="img/member-graphics/blinkies/blinkie_watchdogs.gif"></a>
        </span>
        
        <!-- me -->
        <span data-title="Nori Jammy">
        <a href="img/my-graphics/blinkies/cringe in hell.gif"><img src="img/my-graphics/blinkies/cringe in hell.gif"></a>
        </span>
        
        <span data-title="Nori Jammy">
        <a href="img/my-graphics/blinkies/I need LOVE.gif"><img src="img/my-graphics/blinkies/I need LOVE.gif"></a>
        </span>
        
        <span data-title="Nori Jammy">
        <a href="img/my-graphics/blinkies/lipstick.gif"><img src="img/my-graphics/blinkies/lipstick.gif"></a>
        </span>
        
        <span data-title="Nori Jammy">
        <a href="img/my-graphics/blinkies/RAINBOW BABY.gif"><img src="img/my-graphics/blinkies/RAINBOW BABY.gif"></a>
        </span>
        
        <span data-title="Nori Jammy">
        <a href="img/my-graphics/blinkies/Sky.gif"><img src="img/my-graphics/blinkies/Sky.gif"></a>
        </span>
        
        <span data-title="Nori Jammy">
        <a href="img/my-graphics/blinkies/The Rainbow Connection.gif"><img src="img/my-graphics/blinkies/The Rainbow Connection.gif"></a>
        </span>
        
      </div>
      
      <div class="container pixels">
        <a href="#pixels" onclick="showOnly('pixels')"><h2>Pixels</h2></a>
        
        <!-- me -->
        <span data-title="Nori Jammy">
        <a href="img/my-graphics/pixels/angel.png"><img src="img/my-graphics/pixels/angel.png"></a>
        </span>
        
        <span data-title="Nori Jammy">
        <a href="img/my-graphics/pixels/devil.png"><img src="img/my-graphics/pixels/devil.png"></a>
        </span>
        
        <span data-title="Nori Jammy">
        <a href="img/my-graphics/pixels/cartridge-spin-angel.png"><img src="img/my-graphics/pixels/cartridge-spin-angel.png"></a>
        </span>
        
        <span data-title="Nori Jammy">
        <a href="img/my-graphics/pixels/cartridge-spin-devil.png"><img src="img/my-graphics/pixels/cartridge-spin-devil.png"></a>
        </span>
        
        <span data-title="Nori Jammy">
        <a href="img/my-graphics/pixels/cartridge-spin.png"><img src="img/my-graphics/pixels/cartridge-spin.png"></a>
        </span>
        
        <span data-title="Nori Jammy">
        <a href="img/my-graphics/pixels/cross.png"><img src="img/my-graphics/pixels/cross.png"></a>
        </span>
        
        <span data-title="Nori Jammy">
        <a href="img/my-graphics/pixels/Rainbow Butterfly.png"><img src="img/my-graphics/pixels/Rainbow Butterfly.png"></a>
        </span>
        
        <span data-title="Nori Jammy">
        <a href="img/my-graphics/pixels/rainbow.png"><img src="img/my-graphics/pixels/rainbow.png"></a>
        </span>
        
        <span data-title="Nori Jammy">
        <a href="img/my-graphics/pixels/snowflake2.png"><img src="img/my-graphics/pixels/snowflake2.png"></a>
        </span>
        
        <span data-title="Nori Jammy">
        <a href="img/my-graphics/pixels/snowflake3.png"><img src="img/my-graphics/pixels/snowflake3.png"></a>
        </span>
        
        <span data-title="Nori Jammy">
        <a href="img/my-graphics/pixels/snowflake4.png"><img src="img/my-graphics/pixels/snowflake4.png"></a>
        </span>
        
        <span data-title="Nori Jammy">
        <a href="img/my-graphics/pixels/snowflake6-2.png"><img src="img/my-graphics/pixels/snowflake6-2.png"></a>
        </span>
        
        <span data-title="Nori Jammy">
        <a href="img/my-graphics/pixels/star.png"><img src="img/my-graphics/pixels/star.png"></a>
        </span>
        
      </div>
    </div>
    
    <div class="container-flex">
      <div class="container misc">
       <a href="#misc" onclick="showOnly('misc')"><h2>Misc.</h2></a>
       
       
     <!-- me -->
      <span data-title="Nori Jammy">
        <a href="img/my-graphics/pixels/CSP-color-blocks.gif"><img src="img/my-graphics/pixels/CSP-color-blocks.gif"></a>
        </span>
        
        <span data-title="Nori Jammy">
        <a href="img/my-graphics/pixels/CHRISTMAS.png"><img src="img/my-graphics/pixels/CHRISTMAS.png" width="190"></a>
        </span>
        
        <span data-title="Nori Jammy">
        <a href="img/my-graphics/pixels/bulbs.png"><img src="img/my-graphics/pixels/bulbs.png"></a>
        </span>
        
         <span data-title="Nori Jammy">
        <a href="img/my-graphics/pixels/r-hr.png"><img src="img/my-graphics/pixels/r-hr.png"></a>
        </span>
        
        <span data-title="Nori Jammy">
        <a href="img/my-graphics/pixels/brain-under-construction.png"><img src="img/my-graphics/pixels/brain-under-construction.png" width="190"></a>
        </span>
        
      </div>
      
      <div class="container stamps">
        <a href="#stamps" onclick="showOnly('stamps')"><h2>Stamps</h2></a>
        <span data-title="Skellest">
        <a href="img/member-graphics/stamps/ShitMyself.gif"><img src="img/member-graphics/stamps/ShitMyself.gif"></a>
        </span>
      </div>
      
      <div class="container borders">
        <a href="#borders" onclick="showOnly('borders')"><h2>Borders</h2></a>
        
      </div>
    </div>
  
  </div>
</div>
</div>
  <footer class="bottom-bar">
</footer>
  
  </body>
</html>

…

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RED RANGE</title>
    <!-- STYLE -->
    <link href="/css/style.css" rel="stylesheet" type="text/css" media="all">
    <link href="/css/tooltips.css" rel="stylesheet" type="text/css" media="all">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="icon" type="image/png" sizes="32x32" href="favicon.png">
    <!-- SCRIPTS -->
    <script src="/js/static.js" defer></script>
  </head>
  <body class="red">
  <canvas id="bgCanvas"></canvas>
   <button class="darkToggle dark-btn">
  <i class="fa fa-moon-o"></i>
  </button>
<div class="center">
<div class="main-content-wrapper rainbow-border">
  
  <aside class="left-sidebar">
  </aside>

  <div class="content-area">
  
  <header class="site-header">
    <h1 class="center">
    RAINBOW RANGE GRAPHICS
    </h1>
  </header>
  
    <nav class="topbar">
    </nav>
    
    <div class="container-flex">
     <div class="container buttons">
    <a href="#buttons" onclick="showOnly('buttons')"><h2>Buttons</h2></a>
        
      <div class="items">
        <span data-title="Nori Jammy">
        <img src="img/my-graphics/buttons/bite.gif">
        </span>
        
        <span data-title="Nori Jammy">
        <img src="img/my-graphics/buttons/love sick.gif">
        </span>
        
        <span data-title="Nori Jammy">
        <img src="img/my-graphics/buttons/gorey.gif">
        </span>
        
      </div>
        
      </div>
      <div class="container blinkies">
    <a href="#" onclick="showOnly('blinkies')"><h2>Blinkies</h2></a>
    
        <span data-title="Sweet Satellite">
        <a href="img/member-graphics/blinkies/all-hail-shadow.gif"><img src="img/member-graphics/blinkies/all-hail-shadow.gif"></a>
        </span>
        
        <span data-title="Sweet Satellite">
        <a href="img/member-graphics/blinkies/black-arms.gif"><img src="img/member-graphics/blinkies/black-arms.gif"></a>
        </span>   
        
        <span data-title="Sweet Satellite">
        <a href="img/member-graphics/blinkies/shadow-blank.gif"><img src="img/member-graphics/blinkies/shadow-blank.gif"></a>
        </span>
        
        <span data-title="Sweet Satellite">
        <a href="img/member-graphics/blinkies/shadow-2-blank.gif"><img src="img/member-graphics/blinkies/shadow-2-blank.gif"></a>
        </span>
        
        <span data-title="finny">
        <a href="img/member-graphics/blinkies/blinkie_mcs.gif"><img data-title="finny" src="img/member-graphics/blinkies/blinkie_mcs.gif"></a>
        </span>
        
        </div>
        
      <div class="container pixels">
    <a href="#" onclick="showOnly('pixels')"><h2>Pixels</h2></a>
        
    <div class="items">
        <span data-title="Nori Jammy">
        <img data-title="Nori Jammy" src="img/my-graphics/pixels/cartridge-spin-devil.png">
        </span>
        
        <span data-title="Nori Jammy">
        <img data-title="Nori Jammy" src="img/my-graphics/pixels/devil.png">
        </span>
        
        <span data-title="Nori Jammy">
        <img data-title="Nori Jammy" src="img/my-graphics/pixels/cross.png">
        </span>
       </div> 
    </div>
    
    
       <div class="container misc">
    <a href="#" onclick="showOnly('misc')"><h2>Misc.</h2></a>
       <p>Miscellaneous graphics such as dividers and stickers!</p>
      </div>
      
      <div class="container stamps">
    <a href="#" onclick="showOnly('stamps')"><h2>Stamps</h2></a>
      </div>
      
      <div class="container borders">
    <a href="#" onclick="showOnly('borders')"><h2>Borders</h2></a>
        <p>Borders are frame-like images you can use as CSS image-borders!</p>
      </div>
    </div>
  
  </div>

</div>
</div>

  <footer class="bottom-bar">
</footer>
  </body>
</html>

…

my small screen css:

/* SMALL SCREENS */

@media only screen and (max-width: 1265px) {
 .main-content-wrapper {  
  width: 100%;
} 
}

@media only screen and (max-width: 903px) {
 .main-content-wrapper {  
  width: 100%;
} 
.container {
  width:90%;
  margin: 0 auto; 
}

.container-flex {
  flex-direction: column;
}
}

@media only screen and (max-width: 777px) {
 .main-content-wrapper {  
  width: 100%;
  margin:20px;
} 

.container-flex {
  flex-direction: column;
}
.topbar-nav a {
  font-size: 1.8rem;
}
}

@media (max-width: 700px) {
  .topbar-nav { display: none; }
  .left-sidebar { display: none; }
  .hamburger { display: flex; }
  .nav-drawer { display: flex; }
  .main-content-wrapper, .red, .orange { width: 100%; margin: 10px 0 80px; }
  .container-flex { flex-direction: column; }
  .container { width: 80%; margin: 0 auto; }
  header h1 { font-size: clamp(1.8rem, 7vw, 3rem); }
  .dark-btn { top:30px; font-size:18px; }

}

Please help before I lose it. Man . . .

2

PFFFT I fixed it I’m too fast and persistent. Here’s the fix for anyone with a similar problem:

  @media (max-width: 900px) {
  .main-content-wrapper {
    flex-direction: column; 
    width: 100%;
    border: none;
  }

  .content-area {
    width: 100%;
  }

  .left-sidebar {
    display: none;
  }
  .topbar-nav { display: none; }
  .left-sidebar { display: none; }
  .hamburger { display: flex; }
  .nav-drawer { display: flex; }
  .main-content-wrapper { width: 100%; margin: 10px 0 80px; }
  .container-flex { flex-direction: column; }
  .container { width: 80%; margin: 0 auto; }
  header h1 { font-size: clamp(1.8rem, 7vw, 3rem); }
  .dark-btn { top:30px; font-size:18px; }
}

I needed to add flex-direction to my main-content-wrapper and not just container-flex. I don’t really understand why this fixed it and why it worked on one page but not another–but it works!!! So I’m happy.

2 Likes