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>
Related
can anyone help me? It seems that the specific font size for small devices (max 320px) is not working. Can anybody help? I also included the HTML & CSS.
My code:
#media all and (max-width: 320px) {
#titleHome {
font-size: 4vw;
}
#titleHome2 {
font-size: 2vw;
}
}
<div class="home-caption">
<div id="titleHome" style="font-size:1.8vw; float:left; margin-left:4.5%; color:#black">Random text<br/> & random text</div>
<div id="titleHome2" style="font-size:1.1vw; float:left; margin-top: 4.8%; color:black">
Random Text
</div>
</div>
This is because the font size defined inline on the HTML will take precedence over the one defined in the stylesheet. Please move all your styles to the stylesheet.
You should move your inline styles out of the HTML and into the CSS.
#titleHome {
font-size: 1.8vw;
float: left;
margin-left: 4.5%;
color: #000;
}
#titleHome2 {
font-size: 1.1vw;
float: left;
margin-top: 4.8%;
color: #000
}
#media all and (max-width: 320px) {
#titleHome {
font-size: 4vw;
}
#titleHome2 {
font-size: 2vw;
}
}
<div class="home-caption">
<div id="titleHome">Random text<br/> & random text</div>
<div id="titleHome2">
Random Text
</div>
</div>
Try to add !important to the end of the font size
#media all and (max-width: 320px){
#titleHome {
font-size: 4vw !important;
}
#titleHome2{
font-size: 2vw !important;
}
<div class="home-caption">
<div id = "titleHome" class="titleHome">Random text<br/> & random text</div>
<div id = "titleHome2" class="titleHome2">Random Text</div>
</div>
Css
.titleHome {
font-size:1.8vw;
margin-left:4.5%;
}
.titleHome2 {
font-size:1.1vw;
margin-top: 4.8%;
}
.titleHome, .titleHome2 {
color:#FFFFFF"
float:left;
#media all and (max-width: 320px){
font-size: 4vw;
}
}
Hope this helps
I am trying to align the register button to the vertical middle of the text block in Wordpress. Here is my css:
img.classthumb {
border: 1px solid #d0cccc;
width: 80%;
}
#cldc {
width: 55%;
float: left;
}
#thumbimg {
float: left;
}
.clearfix:after{
visibility:hidden;
display:block;
font-size:0;
content:" ";
clear:both;
height:0;
}
.clearfix {
display:inline-block;
clear:both;
}
* html .clearfix {height:1%;}
.clearfix{display:block;}
#media (max-width:400px) {
#cldc {
float: none;
width: 95%;
text-align: justify;
}
#thumbimg {
float: none;
width: 40%;
margin-bottom: 20px;
}
}
.class {
width:100%;
padding-top: 15px;
}
p.name {
font-family: IowanOldStyle-BlackItalic;
font-size: 16px;
color: #686663;
padding-bottom: 5px;
letter-spacing: 2px;
line-height: 1;
}
p.dates {
font-family: IowanOldStyle-BlackItalic;
font-size: 18px;
color: #686663;
padding-bottom: 2px;
letter-spacing: 2px;
}
p.description {
padding-bottom: 10px;
}
p.location {
}
.event_register {
display: inline;
float: right;
background-color: #e89000;
color: black;
font-family:IowanOldStyle-Bold;
letter-spacing: 1px;
}
Here is my HTML
<div class="class clearfix">
<div id ="thumbimg"><img src="http://localhost:8080/wordpress/wp-content/uploads/2016/07/classthumb.jpg" alt="classthumb" width="123" height="208" class="alignnone size-full wp-image-82 classthumb" />
</div>
<div id="cldc">
<p class= "name">CLASS NAME</p>
<p class= "description">The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
<p class= "dates">Dates</p>
<p class= "location">
Aug 1 - 2, 9AM - 5PM
<em>Salt Lake City, UT</em><button class="event_register">Register</button></p>
<p class= "location">
Aug 12 - 13, 9AM - 5PM
<em>Chicago, IL</em><button class="event_register">Register</button></p>
<p class= "location">
Aug 15 - 16, 9AM - 5PM
<em>Austin, TX</em><button class="event_register">Register</button></p>
Aug 18 - 19, 9AM - 5PM
<em>Denver, CO</em><button class="event_register">Register</button></p>
</div>
</div>
Here is a screen shot where misalignment can be seen. I also need the button to stack underneath the dates in mobile view. Please help! Thank you so much!
enter image description here
You could try adding some CSS along these lines:
.location {
position: relative; /* Required for button positioning */
padding-right: 100px; /* Width of button, plus about 40 pixels to ensure text doesn't crash with button */
}
.location .event_register {
position: absolute; /* Required for positioning the button */
top: 50%; /* Vertically align centre */
right: 0; /* Align right */
margin-top: -10px; /* Half the height of the button to centre correctly */
}
You could wrap that in a media query such as #media (min-width: 960px) to only apply these rules on desktop devices.
For other devices, you could add the following rules to get the button underneath the other text (if you wrapped the above code in a media query, you don't need a media query here):
.location .event_register {
clear: left;
}
For your button styles, you would want to remove the display: inline; for my styles above to work correctly.
I have a sentence in h1 tag. On resize I want the last three words to jump down together not just one at a time, since the last three words are a tagline and it wouldn't make sense if they get separated. Here is the live site.
Here is the HTML:
<header class="header" role="banner">
<div id="inner-header" class="wrap clearfix">
<div id="title">
<!-- to use a image just replace the bloginfo('name') with your img src and remove the surrounding <p> -->
<h1 id="logo" class="h1">
<a href="<?php echo home_url(); ?>" rel="nofollow">
<?php bloginfo('name'); ?><span class="subtitle">
<?php bloginfo('description'); ?></span>
</a>
</h1>
</div>
<nav role="navigation">
<?php bones_main_nav(); ?>
</nav>
</div> <!-- end #inner-header -->
and the scss:
.header {
#title {
#include span-columns(23 ,24);
position: absolute;
top: 30px;
text-align: center;
}
.subtitle {
font-size: 0.3em;
margin-left: 1em;
}
.nav {
#include span-columns(24 omega ,24);
margin-top: 289px;
}
#logo {
a {
color: #fff;
font-family: 'Pacifico', cursive; /*font-size: 2.5em;*/
text-shadow: 0px 0px 0 #B6CEBF,
0.707px 0.707px 0 #B6CEBF,
1.414px 1.414px 0 #B6CEBF,
2.121px 2.121px 0 #B6CEBF,
2.828px 2.828px 0 #B6CEBF,
3.536px 3.536px 0 #B6CEBF,
4.243px 4.243px 0 #B6CEBF,
4.95px 4.95px 0 #B6CEBF,
5.657px 5.657px 0 #B6CEBF,
6.364px 6.364px 0 #B6CEBF,
7.071px 7.071px 0 #B6CEBF;
}
}
}
Try this:
.subtitle {
display: inline-block;
font-size: 0.3em;
margin-left: 1em;
}
Setting the display to inline-block will keep the element's contents together (a behavior of block elements), but still keep it inline with other text.
You should also look at making some other adjustments so the title can be 100% width, and the navigation still gets positioned properly:
#logo {
margin: 80px 0 0;
}
.header #title {
height: 289px;
overflow: hidden;
position: relative;
text-align: center;
width: 100%;
}
.header .nav {
display: inline;
float: right;
width: 100%;
}
.header .nav ul {
/* Add the .clearfix class to this ul */
}
We are talking about responsive #media queries here. There are few ways to do this, but this is the fastest:
Add this rule to you scss:
#media only screen and (max-width: 768px) {
.subtitle{
display: block;
}
}
Aside
Bones comes with other scss files, edit _base.scss for general styles, but for custom styles on resize edit files like _768up.scss, also read the info inside the style.scss file to get more info about the media queries. Bones comes with an awesome documentation.
Further reading
Nice tutorial about media queries from CSS-tricks
Media Queries Spec from W3C
CSS media queries at MDN
Okay, I've seen loads of information about this, but none of the suggested fixes worked for me, or perhaps I just didn't properly understand, so if someone could break this down elementary for me that'd be great, or point me to another link that does. I have a series of divs to make my header, a main container with the logo inside floating left, and then another container floating right, that works all fine, but the internal "menu" container contains two divs in it, one supposed to be at the top, the other at the bottom... to visualize it, its login or register links at the top, and a series of menu links at the bottom. The problem is the ones that are supposed to be at the bottom are actually going to the top, right under the register and login links. If that didn't give you a visual picture, then here is the actual header http://www.sunnahspace.com/pages/header.php i've tried loads of stuff, maybe I've just been trying it wrong though. i've tried the whole, position absolute stuff and honestly i don't even know what that means, but I get the feeling I'm headed in the right direction. Thanks in advance for anyone's help!
<style type="text/css">
.header_links {
font-family: GeosansLight;
font-size: 14px;
color: #FFF;
text-decoration: none;
}
.header_menu {
font-family: GeosansLight;
font-size: 18px;
color: #FFF;
text-decoration: none;
}
#header {
background-image:url(../img/header_bg.jpg);
background-repeat:repeat-x;
width:100%;
height:111px;
}
#logo {
float:left;
margin-left:20px;
}
#header_menu_container {
float:right;
margin-right:20px;
height:111px;
}
#header_menu_top {
margin-top:10px;
vertical-align:top
}
#header_menu_bottom {
margin-top:10px;
vertical-align:bottom
}
</style>
<div id="header">
<div id="logo"> <img src="../img/logo.png" width="390" height="105" alt="SunnahSpace">
</div>
<div id="header_menu_container">
<div id="header_menu_top" align="right">Login <span class="header_links">|</span> <span class="header_links">Join</span>
</div>
<div id="header_menu_bottom" align="right" style="vertical-align:bottom"><span class="header_menu">Home</span><span class="header_menu"> | Profile | About | Contact</span>
</div>
</div>
</div>
<style type="text/css">
.header_links {
font-family: GeosansLight;
font-size: 14px;
color: #FFF;
text-decoration: none;
}
.header_menu {
font-family: GeosansLight;
font-size: 18px;
color: #FFF;
text-decoration: none;
}
#header {
background-image:url(../img/header_bg.jpg);
background-repeat:repeat-x;
width:100%;
height:111px;
}
#logo {
float:left;
margin-left:20px;
}
#header_menu_container {
float:right;
margin-right:20px;
height:111px;
}
#header_menu_top {
margin-top:10px;
vertical-align:top
}
#header_menu_bottom {
margin-top:10px;
vertical-align:bottom
}
</style>
<div id="header">
<div id="logo"> <img src="../img/logo.png" width="390" height="105" alt="SunnahSpace">
</div>
<div id="header_menu_container">
<div id="header_menu_top" align="right">Login <span class="header_links">|</span> <span class="header_links">Join</span>
</div>
<div id="header_menu_bottom" align="right" style="vertical-align:bottom"><span class="header_menu">Home</span><span class="header_menu"> | Profile | About | Contact</span>
</div>
</div>
</div>
add the following to your styles
#header_menu_bottom {
bottom: 15px;
position: absolute;
text-align: right;
width: 300px;
right: 0;
}
#header_menu_container {
position: relative;
}
How do I get the p-tag with text "jon harris" beside the p-tag with text "Room 2"
I have tried float-combinations.. but there is something missing..i guess.
here the html code:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Twitter Avatar Scrolling</title>
<link rel="stylesheet" href="css/events.css" />
</head>
<body>
<div class="event">
<img src="images/red.jpg" alt="picture" />
<p>Room 2</p>
<p class="patient-name">Jon Harris</p>
<p class="event-text">This is a pixel. A flying pixel!</p>
<p class="event-timestamp">feb 2 2011 - 23:01</p>
</div>
</body>
</html>
here is the css:
body {
font:13px/1.5 "helvetica neue", helvetica, arial, san-serif;
}
.event {
display:block;
background: #ececec;
width:380px;
padding:10px;
margin:10px;
overflow:hidden;
text-align: left;
}
.event img {
float:left;
}
.event p {
margin:0;
padding-left:60px;
font-weight: bold;
}
.patient-name {
color: #999999;
font-size: 9px;
padding-left: 5px;
}
.event-text{
color: #999999;
font-size: 12px;
padding-left: 5px;
}
.event-timestamp{
color: #000;
padding-left: 5px;
font-size: 9px;
}
Here you go ... http://jsfiddle.net/2N6tu/
You just need to turn the first two <p> elements to inline elements.
Create a wrapper around those two P tags, set the width of those two P tags and add float: left to both e.g:
<div class="event">
<img src="images/red.jpg" alt="picture" />
<div class="event-wrapper">
<div class="event-inner-wrap">
<p class="room-number">Room 2</p>
<p class="patient-name">Jon Harris</p>
</div>
<div class="clear"></div>
<p class="event-text">This is a pixel. A flying pixel!</p>
<p class="event-timestamp">feb 2 2011 - 23:01</p>
</div>
</div>
css
.clear {
clear: both;
}
.event-wrapper {
width: 300px; /*** assuming that image is 80px, i didn't measure ***/
float: left;
}
.event-inner-wrap {
width: 300px; /*** assuming that image is 80px, i didn't measure ***/
}
p.room-number {
width: 150px; /** set as whatever you like, just make sure this width plus the width of the patient name is no bigger than the wrapper width **/
float: left;
}
p.patient-name {
width: 150px; /** set as whatever you like, just make sure this width plus the width of the room number is no bigger than the wrapper width **/
float: left;
}
Good luck.
Edit, because I saw that image you posted after I added this.
Edit again, because you don't need the extra clear: both; and I missed off 2 semi's.
Note, if you end up using Span tags instead of P the same above principle applies, however, the Span will require a display: block; on them if setting widths etc.
have you tried
.event p{display:inline;}