I'm playing around with a header for a site I'm going to make, and I'm trying to use CSS media selectors to change how the header is viewed on mobile phones.
Here is a fiddle of what I'm trying to do:
http://jsfiddle.net/ro7pbdkw/2/
and
Here is the code:
html:
<img src="http://lifetimefoundation.adoptsites.wpengine.com/wp-content/uploads/sites/3/2014/10/LifetimeLogolong.png" alt="LifetimeFoundation" width="311" height="122" class="header-img" align="left" style="margin-right: 10px;"/>
<div class="header" style="background-color:#6b3f24; height:122px; width:960px;" align="center">
<div class="header-text" style="padding-top: 10px; text-align: left;">
<h1>BUILDING FAMILIES AND FUTURES</h1>
<h5>Through Adoption Grants and Educational Scholarships</h5>
</div>
</div>
CSS:
h1 {
font-family: Garamond;
font-size: 200%;
color: #FFFFFF;
margin: 0px;
}
h5 {
font-family: Garamond;
font-size: 100%;
color: #D9825F;
margin: 0px;
}
#media handheld {
.header {
display:none;
}
}
I want the brown box to disappear on a cell phone and just leave the img as a header, however, I haven't been able to get the style selector to actually work properly. Any tips or comments to let me know what I'm doing wrong?
Much appreciated!
Related
I am trying to create a website where there are four titles above four images and four descriptions below. For both the titles and descriptions, I have used/created two different tables. The images are placed accordingly using margins. The tables look good on my computer but when transferred to a larger screen they move to the left. I figured out that the way to make them compatable and look good on all larger screens would be to centre the tables. I have tried using align: centre for the table and including style="text-align: centre;" but neither have worked. How can I fix this problem. Thanks for any help in advance. It is greatly appreciated. Below is my current code:
.mobile_title {
margin-top: 25px;
font-size: 25px;
color: black;
margin-left: 105px;
font-family: 'Oswald', sans-serif;
}
.text_under {
font-size: 15px;
color: grey;
font-family: 'Oswald', sans-serif;
width: 150;
text-align: center;
}
.mobile {
margin-top: 30px;
margin-left: 160px;
}
.laptop {
margin-left: 140px;
margin-top: 45px;
}
.coding {
margin-left: 155px;
margin-top: 45px;
}
.database {
margin-left: 150px;
margin-top: 45px;
}
.load {
border-collapse: separate;
border-spacing: 130px 10px;
}
.kbg {
border-collapse: separate;
border-spacing: 155px 10px;
}
<body>
<table class="load">
<tr>
<td class="mobile_title">Mobile Development</td>
<td class="mobile_title">Web Development</td>
<td class="mobile_title">Backend Development</td>
<td class="mobile_title">Database Creation</td>
</tr>
</table>
<img src="mobile.png" width=160 height=120 class="mobile">
<img src="laptop.png" width=150 height=100 class="laptop">
<img src="coding.png" width=150 height=100 class="coding">
<img src="database.png" width=150 height=110 class="database">
<table class="kbg">
<tr>
<td class="text_under">The creation of applications for iOS and Android devices. This also includes the mobile optimization of websites, making them responsive on all devices.</td>
<td class="text_under">The creation of web-based sites using multiple programming languages including HTML, CSS, and Custom word press. These websites, after the creation stages, are hosted online for all to observe.</td>
<td class="text_under">The process and supporting information that websites need in order to perform wanted tasks. The information is written in codes, the process called programming.</td>
<td class="text_under">The location of storage of all of the supporting information. This also saves all important files including the back ends of developing websites and/or mobile applications.</td>
</tr>
</table>
</body>
as per my comment, using flexbox it is easier than tables.
.load-wrap {
display: flex;
flex-wrap: wrap;
text-align: center;
font-family: 'Oswald', sans-serif;
/*to center - optional */
width: 75%;
margin: auto
}
.load {
flex: 1;
padding: 20px;
box-sizing:border-box
}
.mobile_title {
margin-top: 25px;
font-size: 25px;
color: black;
}
.text_under {
font-size: 15px;
color: grey;
}
.mobile {
margin-top: 30px;
}
<div class="load-wrap">
<div class="load">
<div class="mobile_title">Mobile Development</div>
<img src="//placehold.it/160x120" class="mobile">
<div class="text_under">The creation of applications for iOS and Android devices. This also includes the mobile optimization of websites, making them responsive on all devices.
</div>
</div>
<div class="load">
<div class="mobile_title">Mobile Development</div>
<img src="//placehold.it/160x120" class="mobile">
<div class="text_under">The creation of applications for iOS and Android devices. This also includes the mobile optimization of websites, making them responsive on all devices.
</div>
</div>
<div class="load">
<div class="mobile_title">Mobile Development</div>
<img src="//placehold.it/160x120" class="mobile">
<div class="text_under">The creation of applications for iOS and Android devices. This also includes the mobile optimization of websites, making them responsive on all devices.
</div>
</div>
<div class="load">
<div class="mobile_title">Mobile Development</div>
<img src="//placehold.it/160x120" class="mobile">
<div class="text_under">The creation of applications for iOS and Android devices. This also includes the mobile optimization of websites, making them responsive on all devices.
</div>
</div>
</div>
Put your images in new row with each image in separated column, also do that for description text. And to center images use:
td img{
display: block;
margin-left: auto;
margin-right: auto;
}
For centering text add:
text-align: center;
In your .load class.
Here is your JSFiddle: https://jsfiddle.net/9c1p3fm6/
Edit: And yes, you need to delete all classes you attached to img elements.
I have a website www.weardenali.com. A part of the site has an image banner which I want to be overlayed by a Colored Box and some text, just like how Bellroy.com has theirs.
This is what I have, a failed code which isn't responsive :
Wear Denali (my site):
Bellroy:
This is the code i am using now :
.image-banner-content.content-left {
padding-left: 1% !important;
}
.sf-animation.image-banner-content,
.sf-animation[data-animation="none"].image-banner-content {
bottom: 80% !important;
}
a.link:hover,
a.link:active {
text-decoration: underline;
color:#F03E3E !important;
}
<div style="margin-bottom: 60%; float: left; display: inline-block; padding: 0px 10px 5px 10px; background-color: #ffffff; position: relative;">
<h3>
<span style="color: #0e3559;">
Designed by Urban Adventurers
</span>
</h3>
<h4>
<a href="http://weardenali.com/" class="link" style="color: #0e3559; float: left; font-family: 'Lato', sans-serif; -webkit-font-smoothing: antialiased; font-size: 12px; letter-spacing: 1.2px;">
> SHOP NOW
</a>
</h4>
</div>
I appreciate any advice/pointers.
Assuming your image banner was done in a kinda sorta ok way... This should work:
<!--- code for the image banner --->
<div class="MyAdvertisement">
<h3>Designed by Urban Adventurers</h3>
<a href="http://weardenali.com/">
<i class="fa fa-chevron-right" aria-hidden="true"></i>
SHOP NOW
</a>
</div>
<!--- end code for the image banner --->
Note that I added Font Awesome code for the > you had in there. Using glyphs the way you did is annoying for non-sighted users. Google Font Awesome. It's nice.
I'm not sure what you want to do exactly. I'll give you css for pixel values, but if you want responsive as is 'scales with the browser', use percentages.
.MyAdvertisement {
display: block;
position: absolute;
top: 0;
left: 0;
width: 200px;
height: auto;
overflow: hidden;
background: white;
}
If you can't put your code where I suggested, you are going to have to tell us more about your site code before anyone can help you in any meaningful way.
Good luck & have fun.
I am trying to get my "more" links to all line up straight. I was wondering if I should make a separate div for them? Otherwise I don't really know what to do. I'm new at this so do not judge too harshly. Thank You! I added a jsfiddle but I know that I didn't properly do it...I hope you can just look at the code though. I'll add a picture of what I'm having problems with: https://jsfiddle.net/uxnLsxxk/
<div class="box1">
<div class="column-left">
<h2> Content</h2>
You can use good'old tables too
<table width="100%">
<tr>
<td>
<table width="100%">
<tr>
<td>
<h2> Content</h2>
</td>
</tr>
<tr>
<td>
<p>GCOM 366 is designed to teach intermediate web design. Building on the beginning
skills you’ve mastered in GCOM266, you will learn the current development tools
commonly used in front end web development. Subjects will include web hosting,
text editors such as the Atom, HTML, CSS, jQuery, Responsive Design, and UI/UX,
and Forms. You will learn through lectures, demonstrations, reading assignments,
and hands-on experiences. We will be working with a variety of materials, typically in a teaching presentation and assignments, with listed resources</p>
</td>
</tr>
<tr>
<td>
<a id="button1" href="about.css">More</a>
</td>
</tr>
</table>
</td>
<td>
<table width="100%">
<tr>
<td>
<h2> Objectives</h2>
</td>
</tr>
<tr>
<td>
<p>GCOM 366 is designed to teach intermediate web design. Building on the beginning
skills you’ve mastered in GCOM266, you will learn the current development tools
commonly used in front end web development. Subjects will include web hosting,
text editors such as the Atom, HTML, CSS, jQuery, Responsive Design, and UI/UX,
and Forms. You will learn through lectures, demonstrations, reading assignments,
and hands-on experiences. We will be working with a variety of materials, typically in a teaching presentation and assignments, with listed resources</p>
</td>
</tr>
<tr>
<td>
<a id="button1" href="about.css">More</a>
</td>
</tr>
</table>
</td>
<td>
<table width="100%">
<tr>
<td>
<h2> Project</h2>
</td>
</tr>
<tr>
<td>
<p>GCOM 366 is designed to teach intermediate web design. Building on the beginning
skills you’ve mastered in GCOM266, you will learn the current development tools
commonly used in front end web development. Subjects will include web hosting,
text editors such as the Atom, HTML, CSS, jQuery, Responsive Design, and UI/UX,
and Forms. You will learn through lectures, demonstrations, reading assignments,
and hands-on experiences. We will be working with a variety of materials, typically in a teaching presentation and assignments, with listed resources</p>
</td>
</tr>
<tr>
<td>
<a id="button1" href="about.css">More</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
Check the output in Jsbin
#media only screen and (min-width: 961px) {
/*-----CONTENT -----*/
figure.adjustable {
width: 29%;
}
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px; /* bottom = footer height */
font-family: 'Arapey', serif;
/*font-family: 'Courier New', sans-serif;*/
font-weight: 300;
font-size: 20px;
}
header {
position: fixed;
z-index: 1000;
width: 100%;
top: 0px;
text: black;
background-color:#670809;
height:70px;
text-align: center;
letter-spacing:1px;
line-height: 55px;
}
header, h1, h2{
font-family: 'Yatra One', cursive;
}
nav ul li a {
display:inline-block;
text-align: center;
padding: 1 px;
color: #fff;
letter-spacing: 1 px;
text-decoration:none;
text-transform: uppercase;
margin: .55em;
font-size: 5 px;
float: right;
}
nav ul li.active a {
/*background-color: none;*/
color: white;
}
nav ul li a:hover {
/*background-color:none;*/
color: white;
}
nav ul li a:visited {
color:white;
}
/* header tags */
h1 {
text-align: center;
color:#013397;
font-size: 40px;
margin: 5px;
}
h2{
text-align: center;
color:#670809;
font-size: 30px;
margin: 5px;
}
p{
text-align: center;
}
.column-left{
float: left;
width: 30%;
padding: 1%;
}
.column-right{
float: right;
width: 30%;
padding: 1%;
}
.column-center{
display: inline-block;
width: 30%;
padding: 1%;
}
section{
text-align: center;
width: 100%;
}
footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
margin: 0;
height: 50px;
background-color:#670809;
font-family: 'Yatra One', cursive;
/* text */
padding-left: 10px;
padding-top: 10px;
color: #ffffff;
font-size: 15px;
text-align:center;
}
a { color: white; }
a, a:hover, a:active, a:visited { color: white; }
.box1{
border-width:thick;
border-style:solid;
border-color:#287EC7;
}
#button1{
color:black;
float: left;
width: 30%;
padding: 1%;
font-weight:bold;
}
#button2{
color:black;
display: inline-block;
width: 30%;
padding: 1%;
font-weight:bold;
}
#button3{
float: right;
width: 30%;
padding: 1%;
color:black;
font-weight:bold;
}
.more{
position:relative;
left:-120px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<header>
Home
About
Contact
MSUM
</header>
<div id="content">
<!--msum logo-->
<figure class="stayssame">
<video controls loop poster="placeholder.png" autoplay>
<source src="video.mp4" type="video/mp4">
<!-- <source src="movie.ogg" type="video/ogg">-->
Your browser does not support the video tag.
</video>
</figure>
<object type="image/svg+xml" data="newsvg.svg" ></object>
<div class="video-txt" ></div>
<section>
<section>
<h1> GCOM 366 Overview</h1>
<div class="box1">
<div class="column-left">
<h2> Content</h2>
<img class="img" src="techpic4.jpg" alt="example web page" width="200" height="200" />
<p>GCOM 366 is designed to teach intermediate web design. Building on the beginning
skills you’ve mastered in GCOM266, you will learn the current development tools
commonly used in front end web development. Subjects will include web hosting,
text editors such as the Atom, HTML, CSS, jQuery, Responsive Design, and UI/UX,
and Forms. You will learn through lectures, demonstrations, reading assignments,
and hands-on experiences. We will be working with a variety of materials, typically in a teaching presentation and assignments, with listed resources.
<br>
<!-- <a id="button1" href="about.css">More</a>-->
</p>
</div>
<br>
<div class="column-center">
<h2>Objectives</h2>
<img class="img" src="techpic1.jpg" alt="html code" width="200" height="200" />
<p>Upon successful completion of the course the student will:
1) Demonstrate competency in the following computer software applications or
practices;
a. HyperText Markup Language (HTML5)
b. Cascading Style Sheets (CSS3)
c. Photoshop
d. IFirefox, Chrome, Safari, IE
e. FTP clients (Fetch, Filezilla, etc.)
2. Design web pages of various complexities.
3. Understand terminology used in web publishing.
4. Discuss the importance of graphic applications and their relationship to the graph
-
ic communications industry.
<br>
<!--<a id="button2" href="contact.css">More</a>-->
</p>
</div>
<div class="column-right">
<h2> Project</h2>
<img class="img" src="techpic2.jpg" alt="keyboard" width="200" height="200" />
<p>The course centers around weekly projects that will feed into the development of a
final project. A website must a have a clear purpose and established brand students will develop their plan for this, and execute it with skills learned in the class.
The website must be well organized, competitively designed, and skillfully coded
<br>
<a id="button3" href="msum.css" class="more">More</a>
</p>
</div>
</section>
</div>
<footer>
</footer>
</body></html>
</body>
</html>
This code should do it.
HTML
<div class="text-container">
<p class="overview-text">
... your text ...
</p>
<div class="more-link">
More
</div>
</div>
CSS
.overview-text, .more-link {
text-align: center;
}
Place the HTML after the img tags.
Set min-height for overview-text class. And i hope it will fix your issue. for example
CSS:
.overview-text{
min-height: 200px
}
I am having trouble figuring out the proper CSS for this page. I would like to maintain a responsive design so that images will re-size for the container they are in. If you look at this JSFiddle in Chrome and Safari it works fine. The images do not resize in FireFox or IE 11. The larger full images do not show on an iPad or iPhone at all. I'm not sure where to turn to next.
Here's the HTML
<div class="colab_page_block_full colab_margin_bottom">
<div class="colab_page_block_half colab_page_block_left colab_top">
<img src="https://www.filzfelt.com/images/pages/collaborators-chiara-assets/chiara-debenedetti-01.jpg" alt="" class="colab_image colab_bottom">
</div>
<div class="colab_page_block_half colab_page_block_right">
<h1 class="colab_text_padding">About Chiara Debenedetti</h1>
<p class="colab_text_padding">Chiara Debenedetti was born in Italy in 1982 and graduated from the European Design Institute of Milan in 2003. She founded Harta Design in 2011 and specializes in packaging, logos and corporate identity for luxury brands in the fashion, fragrance
and food and beverage industries.</p>
<p class="colab_text_padding">“Design for me is going beyond the visual form in order to develop the material aspect. We have five senses, but we often forget about touch. And yet this is the sense that allows us to first interact with the reality that surrounds us: the mother-daughter
relationship comes to mind. In my daily work as a designer, whether I am dealing with graphics or home décor objects, I always pay particular attention to the materials. My studio has become a depository of paper and textiles. With Bloomx, I aimed
to highlight the X-factor of felt: its feeling of warmth to the touch together with the lightness of the shapes that one can create at will.” </p>
</div>
</div>
<div class="colab_page_block_full colab_margin_bottom">
<img src="https://www.filzfelt.com/images/pages/collaborators-chiara-assets/chiara-debenedetti-02.jpg" alt="" class="colab_image colab_bottom">
</div>
<div class="colab_page_block_full colab_margin_bottom">
<div class="colab_page_block_half colab_page_block_left colab_bottom">
<img src="https://www.filzfelt.com/images/pages/collaborators-chiara-assets/chiara-debenedetti-03.jpg" alt="" class="colab_image colab_bottom">
</div>
<div class="colab_page_block_half colab_page_block_right">
<h2 class="colab_text_padding">About Bloomx</h2>
<p class="colab_text_padding colab_margin_bottom">Bloomx is a modular product that marries design and mathematics while providing strong graphic patterning through the play of positive and negative space. The exponent ‘ x’ (best known as ‘ power’ ) represents the infinite solutions in quantity, colors,
and shape. By pairing the single module—a clean essential shaped 6 petals flower—with header options, Bloomx can provide soft and textural space separation as flexible room dividers. 63 colors of 100% Wool Design Felt can be configured in limitless
ways and the product can grow or shrink as needed by adding or removing modules. Plus, the product can be quickly and easily reconfigured in the future as needs or tastes change.</p>
<img src="https://www.filzfelt.com/images/pages/collaborators-chiara-assets/chiara-debenedetti-04.jpg" alt="" class="colab_image colab_bottom">
</div>
</div>
<div class="colab_page_block_full">
<img src="https://www.filzfelt.com/images/pages/collaborators-chiara-assets/chiara-debenedetti-05.jpg" alt="" class="colab_image colab_bottom">
</div>
And here's the CSS that I have so far.
.colab_page_block p {
margin: 0;
font-style: normal;
font-weight: normal;
font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 1.5;
color: #585858;
margin-top: 1.4em;
}
.colab_page_block h1 {
margin: 0;
font-style: normal;
font-weight: normal;
-webkit-font-smoothing: antialiased;
font-family: Museo-300, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 2rem;
line-height: 1;
color: #2f292a;
}
.colab_page_block_full {
width: 100%;
overflow: auto;
display: table;
border: 1px solid black;
}
.colab_page_block_half {
width: 48%;
display: table-cell;
}
.colab_page_block_left {
padding-right: 2%;
border: 1px solid red;
}
.colab_page_block_right {
padding-left: 2%;
border: 1px solid blue;
}
.colab_text_padding {
padding-left: 4%;
padding-right: 8%;
}
.colab_image {
overflow: auto;
max-width: 100%;
max-height: 100%;
}
.colab_bottom {
vertical-align: bottom;
}
.colab_top {
vertical-align: top;
}
.colab_margin_bottom {
margin-bottom: 3.5em;
}
And here's a link to the JSFiddle:
https://jsfiddle.net/twestfall/Lbqfo40u/4/?utm_source=website&utm_medium=embed&utm_campaign=Lbqfo40u
Change the CSS for .colab_image to:
.colab_image {
overflow:auto;
width: 100%;
height: auto;
}
Here's a working JSFiddle.
I have looked at other examples here, but seem to work. I have a small amount of text and an image aligned left inside a blue div. As the page gets narrower the text sizes down properly in the div, but the image remains in the top left of the div. I would like it to stay in the vertical center of the div. It can get larger or stay the same size, I just need it to move to center.
JSfiddle
body, h4 {
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:13px;
color:#333333;
}
* {
padding:0px;
}
.warning {
line-height:1.5em;
font-size:16px;
color:#0c203d;
padding-left:60px;
}
.blueBox {
background-color:#D4DDF7;
min-height:50px;
max-height:150px;
padding:0;
text-align: left;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
.icon {
padding:0;
display:table-cell;
vertical-align: middle;
float:left;
}
#media only screen and (min-width : 735px) and (max-width:1400px) {
.warning {
font-size:16px;
padding-top:14px;
}
#media only screen and (min-width : 321px) and (max-width:734px) {
.warning {
font-size:13px;
padding-top:1px;
}
}
#media only screen and (min-width : 200px) and (max-width:320px) {
.warning {
font-size:12px;
padding-top:1px;
}
}
<div>
<div id="ctl00_ContentPlaceHolder1_countyText">
<p class="text">To find road conditions use the County selection box or simply click on a County on the searchable map. To view ALL Counties at once, Choose ALL COUNTIES from the dropdown, and click Go.
<br />Map is not visible on small screens.</p>
<div class="blueBox">
<img class="icon" src="https://placeimg.com/50/50/arch/grayscale" alt="Arrow Icon" width="50px" height="50px" />
<h4 class="warning">THIS VIEW DOES NOT CONTAIN STORM RELATED EMERGENCY ROAD CONDITIONS.</h4>
</div>
<!-- End blueBox -->
<p>To view our progress on STORM Related closings, Visit our Work Plan and Current Closures site.</p>
<p><span id="ctl00_ContentPlaceHolder1_lblMessageCty" class="bText rText">See Results Below</span>
</p>
</div>
</div>
<br/>
<br/>
I guess this is what you are looking for:
You must specify display:inline-table to your .icon and .warning class. Also as you have image so you must not directly apply vertically-align:middle;, better if you wrap it around div/span.
Working : Fiddle
body,
h4 {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
color: #333333;
}
* {
padding: 0px;
}
.warning {
display: table-cell;
font-size: 16px;
color: #0c203d;
padding-left: 60px;
vertical-align: middle;
}
.blueBox {
background-color: #D4DDF7;
min-height: 50px;
max-height: 150px;
padding: 0;
text-align: left;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
display: table;
}
.icon {
display: table-cell;
vertical-align: middle;
}
#media only screen and (min-width: 735px) and (max-width: 1400px) {
.warning {
font-size: 16px;
}
#media only screen and (min-width: 321px) and (max-width: 734px) {
.warning {
font-size: 13px;
}
}
#media only screen and (min-width: 200px) and (max-width: 320px) {
.warning {
font-size: 12px;
}
}
<body>
<div>
<div id="ctl00_ContentPlaceHolder1_countyText">
<p class="text">To find road conditions use the County selection box or simply click on a County on the searchable map. To view ALL Counties at once, Choose ALL COUNTIES from the dropdown, and click Go.
<br />Map is not visible on small screens.</p>
<div class="blueBox"> <span class="icon"><img src="https://placeimg.com/50/50/arch/grayscale" alt="Arrow Icon" width="50px" height="50px" /></span>
<h4 class="warning">THIS VIEW DOES NOT CONTAIN STORM RELATED EMERGENCY ROAD CONDITIONS.</h4>
</div>
<!-- End blueBox -->
<p>To view our progress on STORM Related closings, Visit our Work Plan and Current Closures site.</p>
<p><span id="ctl00_ContentPlaceHolder1_lblMessageCty" class="bText rText">See Results Below</span>
</p>
</div>
</div>
<br/>
<br/>
</body>
Remove the float from the .icon element and margin-left: auto and margin-right: auto. Put the below code in whichever breakpoint you'd like to see this behavior.
.icon {
float: none !important;
margin: 0 auto;
}
Your #media queries have some issues, so I've edited them in this example.
body,h4 {
font-family:Gotham,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size:13px;
color:#333;
}
* {
padding:0;
}
.warning {
line-height:1.5em;
font-size:16px;
color:#0c203d;
padding-left:60px;
}
.blueBox {
background-color:#D4DDF7;
min-height:50px;
max-height:150px;
padding:0;
text-align:left;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
.icon {
padding:0;
display:table-cell;
vertical-align:middle;
float:left;
}
#media screen and (max-width: 480px) {
.icon {
float: none !important;
margin: 0 auto;
}
<body>
<div>
<div id="ctl00_ContentPlaceHolder1_countyText">
<p class="text">To find road conditions use the County selection box or simply click on a County on the searchable map. To view ALL Counties at once, Choose ALL COUNTIES from the dropdown, and click Go.
<br />Map is not visible on small screens.</p>
<div class="blueBox">
<img class="icon" src="https://placeimg.com/50/50/arch/grayscale" alt="Arrow Icon" width="50px" height="50px" />
<h4 class="warning">THIS VIEW DOES NOT CONTAIN STORM RELATED EMERGENCY ROAD CONDITIONS.</h4>
</div>
<!-- End blueBox -->
<p>To view our progress on STORM Related closings, Visit our Work Plan and Current Closures site.</p>
<p><span id="ctl00_ContentPlaceHolder1_lblMessageCty" class="bText rText">See Results Below</span>
</p>
</div>
</div>
<br/>
<br/>
</body>
When using media queries at specified breakpoints, you're typically safe to use display: table on a parent and display: table-cell; vertical-align: middle; on the children in order to vertically align their contents.
In the snippet below, I have removed most of your HTML to better outline the elements to which the CSS actually applies. This should help anyone else who happens to land on this question. Also, I replaced the img tag since an arrow in this case is not semantic content and it made things easier to style.
body { font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; }
/* ------------------ Start Important Part ------------------ */
.warning {
display: table; /* Set container as table */
width: 100%;
background-color: #D4DDF7;
}
.warning > * {
display: table-cell; /* Set children as table-cell */
padding: 15px;
vertical-align: middle; /* Vertically center children */
}
/* ------------------- End Important Part ------------------- */
/* Icon */
.warning > .icon { width: 50px; }
.warning > .icon::after {
content: "";
display: inline-block;
background: url("https://placeimg.com/50/50/arch/grayscale");
width: 50px;
height: 50px;
}
/* Warning text */
.warning > p {
line-height: 1.5em;
font-size: 16px;
color: #0c203d;
font-weight: bold;
}
<div class="warning">
<span class="icon"></span>
<p>THIS VIEW DOES NOT CONTAIN STORM RELATED EMERGENCY ROAD CONDITIONS.</p>
</div>