I'm fairly new to building sites and have limited knowledge of what I'm doing, but my issue lies in the social media icons of my site. When in mobile view, the icons stack vertically but I want them to stay horizontal and shrink to fit the screen like they do in my tablet and desktop view. I've tried display: inline-block, no change. Does anyone know what I can do to fix this? I'm sure it's a simple fix, but I cannot figure it out. Again, sorry I know so little but any help would be greatly appreciated. Below the picture is the full css I'm working with. Thanks! Header 1 @charset "UTF-8"; /* CSS Document */ html, html * { padding: 0; margin: 0; box-sizing: border-box; font-family: Gotham, Helvetica Neue, Helvetica, Arial, sans-serif; } header { padding: 32px; } img { width: 100%; max-width: 100%; height: auto; vertical-align: middle; } footer { padding: 20px 30px; background-color: #dbecf1; text-align: center } body { margin-left: auto; margin-right: auto; } .style-logo { margin-left: auto; margin-right: auto; display: block; width: 192px; } .style-nav ul { list-style-type: none; } .style-nav ul li a { text-decoration: none; color:#2F322a; text-align: center; display: block; text-transform: lowercase; padding: 6px; } .row:before, .row:after { content: ""; display: table; } .row:after { clear:both; } .hero { background-image: url("images/hero.jpg"); background-size: cover; padding: 20px 20px 50px 20px; color: #fffffff; text-align: center; text-shadow: 2px 2px 5px black; } .herops { background-image: url("CSS/images/hero payment and schedule.jpg"); background-size: cover; padding: 20px 20px 50px 20px; color: #fffffff; text-align: center; text-shadow: 2px 2px 5px black; } .heroabout { background-image: url("CSS/images/neonheart.gif"); background-size: cover; padding: 20px 20px 50px 20px; color: #fffffff; text-align: center; text-shadow: 2px 2px 5px black; } h1 { font-size: 57px; text-transform: uppercase; font-weight: 200; margin-bottom: 60px; color: #ffffff; } h2 { font-size: 30px; text-transform: uppercase; font-weight: 200; margin-bottom: 23px; color: #ffffff; } h3 { font-size: 16px; text-transform: uppercase; font-weight: 200; margin-bottom: 120px; color: #ffffff; } h4 { font-size: 16px; font-weight: 200; margin-bottom: 35px; color: #ffffff; } p { font-size: 16px; font-weight: 400; margin-bottom: 35px; color: #ffffff; } .button { border: 2px #ffffff solid; padding: 8px 30px 8px 30px; border-radius: 30px; color: #ffffff; text-decoration: none; } .info-box-red { background-color:#874243; color: #ffffff; padding: 30px 20px 60px; text-align: center; } .info-box-dark { background-color:#2d2d35; color: #ffffff; padding: 30px 20px 60px; text-align: center; } .footer-text { font-size: 13px; margin: 20px; color: #000000; } .col { width: 100%; padding: 0px 7px 14px; } .icon-bar ul { list-style-type: none; float: auto; } .icon-bar ul li a { padding: 6px; display: inline-table; align-items: center; } .class-buttons ul { list-style-type: none; display: inline-block; } .class-buttons ul li a { align-items: center; } /*Tablet View*/ @media (min-width: 768px){ body { max-width: 778px; } .style-nav ul li { display: inline-block; } .style-nav ul { text-align: center; } .icon-bar ul li { display: inline-block; } .icon-bar ul { align-content: center; } .class-buttons ul { align-content: center; } .class-buttons ul li { display: inline-block; } h1 { font-size: 40px; magin-bottom: 90px; } h2 { font-size: 25px; margin-bottom: 53px; } h3 { font-size: 16px; margin-bottom: 120px; } h4 { font-size: 16px; margin-bottom: 35px; } .col-md-one-half { width: 50%; } .col { float: left; padding: 0px 7px 14px; } /*Desktop View*/ @media (min-width: 1024px){ body { max-width: 1200px; } .style-logo { float: left; } .style-nav { float: right; } .col-lg-one-fourth { width:25%; } .icon-bar { float: right; }
... View more