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
Related
so I'm a beginner and I started this project by first writing CSS in styles.scss and then transforming the code inside of it using scss tools. I made an each loop to loop through a set of colors in my color map, placed in a mixin and put that mixin under [class^=btn].
I don't know why this doesn't work?
Here is my SCSS:
//colors
$base-grey: #808080;
$base-white: #ffffff;
$base-green: #71eeb8;
$base-blue: #2dcae6; //base-success: #33c052;
$base-red: #ff6666; //red
$base-orange: #ff751a; //warning
$base-purple: #8a54f7; //info
// grid base class
.grid {
// .grid__row
&__row {
padding: 1em 10px;
display: flex;
flex-direction: column;
// NOTE: replace with media query mixin if aiming for exceeds
#media (min-width: 768px) {
flex-direction: row;
}
}
// .grid__col
&__col {
// create grid columns dynamically
// loop through each column size
#for $i from 1 through 12 {
// concatenate CSS selector, ie when $i = 1,
// selector would be .grid__col--1
&--#{$i} {
// base styles applied to all grid columns
// NOTE: could be converted to a placeholder, along with margin
// from the media query
margin-top: 10px;
flex-basis: 100%;
border: 1px red solid;
// NOTE: replace with media query mixin if aiming for exceeds
#media (min-width: 768px) {
// base stlyes applied to all grid columns
margin-top: 0;
// make column width a percentage of the column number / total columns
flex-basis: #{$i / 12 * 100 + "%"} ;
}
}
}
}
}
// targets all elements with classes that begin with grid__col
[class^=grid__col] {
// grid__col + grid__col, targets two sibling columns
& + & {
// NOTE: replace with media query mixin if aiming for exceeds
#media (min-width: 768px) {
// add grid gutter
margin-left: 10px;
}
}
}
.grid {
&__row {
display: flex;
}
}
//BASE
.container {
text-align: left;
font-family: 'Arial Narrow', Arial,sans-serif;
color: $base-grey;
padding: 5px;
font-weight: 500;
}
p {
text-align: left;
line-height: 1.3;
}
a {
text-decoration: none;
}
//NAVIGATION
.nav {
list-style-type: none;
padding: 0;
text-align: center;
}
.nav__item a {
display: block;
color: inherit;
margin: 8px 0;
padding: 8px;
}
.nav__item a:hover {
color: $base-white;
background-color: $base-green;
}
//TYPOGRAPHY
//link
.link {
color: $base-blue;
font-weight: bold;
}
//blockquote
.blockquote {
border-left: $base-green 8px solid;
padding-left: 10px;
font-style: oblique;
font-size: 1.2em;
}
// headlines
#mixin h2-font-weight {
font-weight: 100;
}
.headline--primary {
color: $base-green;
margin-left: 10px;
}
.headline--secondary {
text-align: left;
#include h2-font-weight;
}
//FORM
.form {
display: flex;
flex-direction: column;
&__input {
border: none;
border-bottom: 2px solid $base-green;
margin-bottom: 15px;
}
&__label--hidden {
display: none;
}
& .headline--secondary {
#include h2-font-weight;
}
}
//BUTTONS
#mixin button-styles {
display: block;
width: 100%;
border: none;
margin-bottom: 15px;
padding: 10px;
color: $base-white;
text-transform: uppercase;
font-weight: bold;
}
$button-colors :(
default:$base-blue,
success:$base-green,
error:$base-red,
warning:$base-orange,
info:$base-purple
);
#mixin button-colors {
#each $button, $color in $button-colors {
.btn--#{$button} {
background-color: #{$color};
}
}
}
[class*=btn] {
#include button-styles;
}
//IMAGE
#mixin center-images {
display: block;
max-width: 100%;
margin: 0 auto;
padding: 8px;
}
[class^=img] {
#include center-images;
}
.img {
&--frame {
border: 2px solid $base-grey;
}
}
This is my HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Circles UI Kit</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/normalize.css">
</head>
<!--
List of classes used
Grid:
.container
.grid__row
.grid__col--1 *NOT USED HERE
.grid__col--2 *
.grid__col--3
.grid__col--4
.grid__col--5
.grid__col--6
.grid__col--7
.grid__col--8
.grid__col--9
.grid__col--10 *
.grid__col--11 *
.grid__col--12
.card
.centered
.theme__colors
(.grid__col--1, .grid__col--2, .grid__col--10, and .grid__col--11 are not used here in the HTML but would be good to include in the Sass)
Typography:
.container
.link
.blockquote
.headline--primary
.headline--secondary
Image:
.img--logo
.img--frame
.img--avatar
Navigation:
.nav
.nav__item
Buttons:
.btn--default
.btn--success
.btn--error
.btn--warning
.btn--info
.theme__colors
Forms:
.form
.form__label--hidden
.form__input
-->
<body class="container">
<div class="grid__row">
<div class="grid__col--3">
<a class="link" href="/">
<img class="img--logo" alt="circles logo" src="images/logo.png">
</a>
</div>
<div class="grid__col--9">
<nav role="navigation">
<ul class="nav">
<li class="nav__item">Typography</li>
<li class="nav__item">Buttons</li>
<li class="nav__item">Form</li>
<li class="nav__item">Images</li>
<li class="nav__item">Grid</li>
</ul>
</nav>
</div>
</div>
<div class="grid__row">
<div class="grid__col--12">
<div class="card">
<p>This is what the navigation menu looks like when the screen is at 769px or higher. When the screen is less
than 769px,
the menu will be displayed vertically.</p>
</div>
</div>
</div>
<div class="grid__row">
<div class="grid__col--8">
<div class="card">
<h4 id="type" class="headline--secondary">Typography</h4>
<h1 class="headline--primary">Take a look at this amazing headline</h1>
<p>This is a typical paragraph for the UI Kit. Here is what a link might look like.
The
typical font family for this kit is Helvetica Neue. This kit is intended for clean and refreshing web layouts.
No jazz hands here, just the essentials to make dreams come true, with minimal clean web design. The kit comes
fully equipped with everything from full responsive media styling to buttons to form fields. <em>I enjoy using
italics as well from time to time</em>.
Fell free to create the most amazing designs ever with this kit. I truly hope you enjoy not only the kit but
this
amazing paragraph as well. :)</p>
<blockquote class="blockquote">You know what really gets me going? A really nice set of block quotes. That's
right, block quotes that say, "Hey,
I'm an article you want to read and nurture."</blockquote>
</div>
</div>
<div class="grid__col--4">
<form class="form">
<legend id="forms" class="headline--secondary">Form Elements</legend>
<img class="img--avatar" src="images/avatar.png" alt="Avatar">
<label class="form__label--hidden" for="username">Username:</label>
<input class="form__input" type="text" id="username" placeholder="Username">
<label class="form__label--hidden" for="password">Password:</label>
<input class="form__input" type="password" id="password" placeholder="Password">
<button class="btn--default theme__colors" type="submit" value="Login">Login</button>
</form>
</div>
</div>
<h4 id="images" class="headline--secondary">Images</h4>
<div class="grid__row">
<div class="grid__col--6">
<img class="img--frame" src="images/image.png" alt="sample image">
</div>
<div class="grid__col--6">
<img class="img--avatar" src="images/avatar.png" alt="Avatar">
</div>
</div>
<h4 id="buttons" class="headline--secondary">Buttons</h4>
<div class="grid__row">
<div class="grid__col--12">
<button class="btn--default theme__colors">default</button>
<button class="btn--success theme__colors">success</button>
<button class="btn--error theme__colors">error</button>
<button class="btn--warning theme__colors">warning</button>
<button class="btn--info theme__colors">info</button>
</div>
</div>
<h4 id="grid" class="headline--secondary">Grid System</h4>
<div class="grid__row">
<div class="grid__col--12 theme__colors">.grid__col--12</div>
</div>
<div class="grid__row">
<div class="grid__col--6 theme__colors">.grid__col--6</div>
<div class="grid__col--6 theme__colors">.grid__col--6</div>
</div>
<div class="grid__row">
<div class="grid__col--4 theme__colors">.grid__col--4</div>
<div class="grid__col--4 theme__colors">.grid__col--4</div>
<div class="grid__col--4 theme__colors">.grid__col--4</div>
</div>
<div class="grid__row">
<div class="grid__col--3 theme__colors">.grid__col--3</div>
<div class="grid__col--3 theme__colors">.grid__col--3</div>
<div class="grid__col--3 theme__colors">.grid__col--3</div>
<div class="grid__col--3 theme__colors">.grid__col--3</div>
</div>
<div class="grid__row">
<div class="grid__col--5 theme__colors">.grid__col--5</div>
<div class="grid__col--7 theme__colors">.grid__col--7</div>
</div>
<div class="grid__row">
<div class="grid__col--8 theme__colors">.grid__col--8</div>
<div class="grid__col--4 theme__colors">.grid__col--4</div>
</div>
<div class="grid__row">
<div class="grid__col--7 theme__colors centered">.centered .grid__col--7</div>
</div>
</body>
</html>
You are missing two things:
The mixin of button colours need to be:
#mixin button-colors {
#each $button, $color in $button-colors {
&.btn--#{$button} {
background-color: #{$color};
}
}
}
with & before .btn.
You didn't call your mixin. You need to write:
[class*=btn] {
#include button-styles();
#include button-colors();
}
I have a button on my website but i want it to be only available on mobile.
How can i hide it from my desktop site?
<div class="pull-right">
<button class="button-menu-mobile open-left">
<i class="ion-navicon"></i>
</button>
<span class="clearfix"></span>
</div>
And here is the css
.button-menu-mobile {
background: transparent;
border: none;
color: #ffffff;
font-size: 21px;
line-height: 60px;
padding: 0px 15px;
Thanks :)
I am attaching a working code snippet, here if you go full screen, you won't be able to see the button.
Working Example
#media(min-width: 900px)
{
.button-menu-mobile
{
display:none;
}
}
<div class="pull-right">
<button class="button-menu-mobile open-left">
<i class="ion-navicon"></i>
</button>
<span class="clearfix"></span>
</div>
You need to use media-queries for this purpose. set min-width according to your need.
#media(min-width: 900px)
{
.button-menu-mobile
{
display:none;
}
}
Code:
#media screen and (min-width: 600px) {
.pull-right {
visibility: hidden;
}
}
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>
How do I make the input elements have the same size and alignment as my div elements? (facebookLoginButton and standardLoginButton)
HTML code:
<header>
<div id="topPane">
<h1 id="georgeLogo">G.</h1>
<div id="login">
<div id="facebookLoginButton">Continue with Facebook</div>
<br class="lb">
<div class="center">or</div>
<br class="lb">
<form id="loginForm">
<input type="text" placeholder="Email Address" required>
<br>
<input type="text" placeholder="Password" required>
</form>
<div id="standardLoginButton">Login</div>
</div>
</header>
<div id="bottomPane"></div>
Jsfiddle http://jsfiddle.net/0013v9yj/
In css, apply the same styles to the input... and add display: block to the input
Changed the last css block into this (just added input size on media queries, you only added it in the last of them)
/*********************
MEDIA QUERIES
*********************/
#media only screen and (min-width: 0px) and (max-width: 480px) {
#georgeLogo {
font-size: 6em;
}
#facebookLoginButton, #standardLoginButton, #loginForm input {
font-size: 1.5em;
width: 12.5em;
}
}
#media only screen and (min-width: 481px) and (max-width: 768px) {
#georgeLogo {
font-size: 7em;
}
#facebookLoginButton, #standardLoginButton, #loginForm input {
font-size: 1.5em;
width: 15em;
}
}
#media only screen and (min-width: 769px) {
#georgeLogo {
font-size: 8em;
}
#facebookLoginButton, #standardLoginButton, #loginForm input {
font-size: 2em;
width: 15em;
}
#loginForm {
width: 15em;
}
}
So your issue is that you're using em instead of rem or pixels.
em is relative to its parent, so this can get kind of confusing with the math. If you have an li which is sized at 1.2em and nest another li inside it, it effectively gets a font-size of 1.2 × 1.2 = 1.44em.
rem is not relative to its parent, but to the root of the documnet (default of 16px). However, keep in mind rem is not supported by IE < 9.
In your code, 15 em is a different width for your form and your facebookLoginButton because you keep changing that parent's font-size/em.
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