I tried to use media query for the first time to make a simple section responsive where the font-size gets smaller when the screen is small
but for some reason it didn't work for me please if you see something that i dont infrom me
here is the HTML code that i use for the project
HTML:
<!DOCTYPE html>
<html>
<head>
<title>
EYD
</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" >
</head>
<body>
<main>
<div class="mainco">
<h1>
welcome to <br><span>EYD</span>
</h1>
<h2>best web-developing service on the internet</h2>
<div class="buttons">
<p>ORDER</p>
<p>HOW IT WORKS</p>
</div>
</div>
</main>
<!-- ******************************************************** -->
<section>
</section>
</body>
</html>
here is the CSS code that contains the media query targeting a h1 element in the page
CSS:
/*this is a universal selector to clear the padding and margin*/
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
font-family:Verdana, Geneva, Tahoma, sans-serif;
}
/*-------------------------------------
main
--------------------------------------*/
/*here is the style of the main as a section*/
main{
background: url(code1.jpg) purple;
background-repeat: no-repeat;
background-size:cover ;
width: 100%;
height: 630px;
color: white;
font-family: "alternate gothic";
padding: 20px 0 0 0;
}
/*the style of the main section's text block*/
.mainco{
width: 40%;
max-height: 70%;
text-align: center;
margin: 10% 30px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#media only screen and (max-width: 800px){
.mainco h1{
font-size:20px;
}
}
/*the style of the h1 of the text*/
.mainco h1 {
font-size: 60px;
}
.mainco h1 span{
text-shadow: 3px 3px rgb(167, 119, 119); font-size: 75px;
}
/*the style of h2 of the text*/
main h2{
font-size: 50px;
}
.buttons{
min-width: 400px;
}
/*the style of the two button's text containers*/
.buttons p{
padding: 20px;
background-color: brown;
display: inline-block;
margin: 60px 20px;
}
/*styling the button's text*/
.buttons a{
text-decoration: none;
color: white;
display: block;
width: 100%;
height: 100%;
}
Always put your media queries at the end of your CSS code. That will stop the the other h1 declarations from overriding your media query.
the main problem with your CSS code is the order
Your declaration .mainco h1 overwrite previously declared media query so if you change your CSS to this, it will work.
your media query should be bellow your global CSS
/*here is the style of the main as a section*/
main{
background: url(code1.jpg) purple;
background-repeat: no-repeat;
background-size:cover ;
width: 100%;
height: 630px;
color: white;
font-family: "alternate gothic";
padding: 20px 0 0 0;
}
/*the style of the main section's text block*/
.mainco{
width: 40%;
max-height: 70%;
text-align: center;
margin: 10% 30px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#media only screen and (max-width: 800px){
.mainco h1{
font-size:20px;
}
}
/*the style of the h1 of the text*/
.mainco h1 {
font-size: 60px;
}
.mainco h1 span{
text-shadow: 3px 3px rgb(167, 119, 119); font-size: 75px;
}
/*the style of h2 of the text*/
main h2{
font-size: 50px;
}
.buttons{
min-width: 400px;
}
/*the style of the two button's text containers*/
.buttons p{
padding: 20px;
background-color: brown;
display: inline-block;
margin: 60px 20px;
}
/*styling the button's text*/
.buttons a{
text-decoration: none;
color: white;
display: block;
width: 100%;
height: 100%;
}
Related
I am trying to put a button under a heading, but the button is being pushed to the side. I assume it has to do with absolute position or something, but I am not too sure. I also want to make the button responsive like the text, so that the size of the button changes in different windows.
HTML:
body{
font-family: sans-serif;
margin:0px;
}
.splash{
background-color: #faead3;
height: fill;
padding: 0;
margin:0;
display: flex;
justify-content: left; /* align horizontal */
align-items: center; /* align vertical */
height: 100vh;
}
.splash h1{
margin:0px;
font-size: 4.5vw;
color: #08aabe;
margin-left: 2.5em;
padding-bottom: 3.5em;
}
.button {
background-color: #08aabe;
border: none;
color: #faead3;
padding: 1em 2em;
text-align: center;
text-decoration: none;
font-size: 1w;
}
<div class="splash">
<h1>Random Text.</h1>
<a class="button"href="#">Button Link</a>
</div>
https://codepen.io/anon/pen/qQraNB
Any help is appreciated, thanks!
You use display:flex whats make them be in same line so:
1.Remove display:flex from .splash
2.font-size: 1w; in .button {} is invalid change it to font-size: 2.5vw;
you can use margin-left: 4.5em; to button
See code in fiddle:
body{
font-family: sans-serif;
margin:0px;
}
.splash{
background-color: #faead3;
height: fill;
padding: 0;
margin:0;
height: 100vh;
}
.splash h1{
margin:0px;
font-size: 4.5vw;
color: #08aabe;
margin-left: 2.5em;
padding-bottom: 3.5em;
}
.button {
background-color: #08aabe;
border: none;
color: #faead3;
padding: 1em 2em;
text-decoration: none;
font-size: 2.5vw;
margin-left: 4.5em;
}
<div class="splash">
<h1>Random Text.</h1>
<a class="button"href="#">Button Link</a>
</div>
There's a padding-bottom: 3.5em; set on the heading title, which is pushing the heading up, if you take that the padding bottom off, the button should align the same vertically on both of them.
I recently published a website http://marishomeimprovements.com/
There is a picture in the background on the top of the page and for whatever reason, it won't load through Safari on iPhones.
html:
<section class="home" id="home">
<div class="overlay">
<div class="title">
<p>The Best Remodeling Company</p>
<h1>We Are Maris Home Improvements</h1>
<p>Specializing in Decks, Windows, Siding and More.</p>
<div class="giftCardAd">
<h1 class="heading"><span id="callNow">Call Now!</span></h1>
<h3>$25 gift card with free estimate.</h3>
<h2>636-778-4343</h2>
<h4>We are here for you.</h4>
</div>
</div>
</div>
</section>
css:
.home{
height: 600px;
background-image: url('../images/background.png');
background-attachment: fixed;
background-repeat: no-repeat;
background-position: top;
background-size: cover;
text-align: center center;
overflow: hidden;
}
.home .overlay{
background-color: rgba(0, 0, 0, 0.25);
height: 600px;
padding: 70px 0;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.home .overlay .title h1{
font-size: 45px;
color: #fff;
letter-spacing: 1px;
font-weight: 600;
margin: 0;
}
.home .overlay .title p{
line-height: 1.6em;
color: #ddd;
font-size: 16px;
font-weight: 300;
margin-top: 20px;
}
.home .overlay .title .a-btn{
font-weight: 400;
display: inline-block;
margin-top: 30px;
margin-right: 20px;
background-color: #0060e2;
color: #fff;
}
.home .overlay .title .a-btn:hover{
border: 1px solid #0060e2;
color: #fff;
background-color: transparent;
}
#media screen and (max-width: 480px){
.home .overlay .title .bannerImage{
display:none;
}
.box .item .location{
display:none;
}
.heading{
font-size:30px;
}
}
And then some more:
#media only screen and (max-width: 600px) {
.home div .title{
margin-top:4em;
clear:both;
width:90%;
}
.home div .title h1{
font-size:35px !important;
}
.giftCardAd{
width:95%;
}
#live-chat{
display:none;
}
}
The issue that I have with this is that it doesn't load the picture in or at least it doesn't display it properly to the user on iPhones.
I've tried changing the format of the picture from jpg to png but nothing seems to be working.
I would greatly appreciate the help!
Remove your background-attachment: fixed it's causing the problem
I can't change h1 font-size in print preview. although every other property works, the font size doesn't work.
body{
margin: 1%;
padding:1%;
background-color: rgba(0,0,255,.2);
font-size: 100%;
min-width: 500px;
}
header, footer{
background-color:#0066FF;
padding: 1%;
margin: 1%;
}
header h1{
font-size: 3rem;
color:rgba(0,0,0,.7);;
}
section{
margin:1%;
padding:1%;
}
nav a{
display:block;
background-color: white;
border: 1px solid black;
text-align: center;
border-radius: 35px;
text-decoration: none;
padding: 2%;
margin: 1%;
}
h1{
text-align: center;
color:rgba(255,0,0,.7);;
}
.myClass{
margin: 0em 1em;
padding:.75em;
border: 1px solid black;
border-radius: .25%;
/* Safari and Chrome */
-webkit-column-count:3;
-moz-column-count: 3;
column-count:3;
}
ol{
list-style:upper-roman;
margin:1em;
}
img{
display: none;
}
footer{
clear: both;
text-align:center;
text-transform: uppercase;
}
#media screen and (min-width: 600px) {
img{
display: inline-block;
width: 20%;
margin-right: 4%;
}
section {
display: inline-block;
vertical-align: top;
}
#left {
width: 20%;
}
#center {
width : 70%;
}
#center div:last-of-type{
width: 100%;
padding:.75em;
padding-left: 0;
margin: 0em 1em;
}
h2 {
font-size: 1.7em;
}
h1::after {
content: "(I guess...)";
}
h3 {
height: 35px;
line-height: 35px;
font-size: 1.6em;
font-weight: bolder;
}
#center div p {
height: 45px;
line-height: 45px;
font-size: 1.6em;
}
header , footer {
background-color: initial;
}
footer {
width: 70%;
float: right;
}
footer p {
text-align: left;
}
}
#media print {
nav a {
display:block;
background-color: white;
border: 0;
text-align: center;
border-radius: 0;
text-decoration: none;
padding: 0;
margin: 0;
}
h1 {
font-style: italic;
font-weight: bolder;
font-size: 16px;
}
}
<!--
Create a stylesheet that will style the page
as it appears in the example. -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Responsive Design Lab</title>
<link rel="stylesheet" type="text/css" href="responsive.css"/>
<meta charset = "UTF-8">
</head>
<!-- DO NOT CHANGE ANY PART OF THIS HTML CODE!!! -->
<header>
<h1> Web Design is Awesome!!!</h1>
<nav>
University of Michigan
Intro to Web Design
</nav>
</header>
<footer>
<p>Sample code for Responsive Design .<br/> Colleen van Lent</p>
</footer>
<!-- DO NOT CHANGE ANY PART OF THIS HTML CODE!!! -->
</body>
</html>
Try using em, px, or a a percent value.
h1 {
font-size: 24px;
font-size: 200%;
font-size: 1.5em;
}
The percentage will depend on what the default text size is.
Usually the default size is 16px.
I was facing the same problem for H1. It turned out that for me normalize.css was overriding the font-size in the CSS file.
Try to use css for print mode:
#media print{
h1{....}
}
You can add !important in front of the h1 property value so that the browser does not override the value in print preview.
I've all of a sudden got a problem trying to display a background-image in CSS.
The image is invisible!
I'm trying to use this background image specifically for a certain location on the page, before scrolling down further to another image or background.
Can anyone shed some light on this situation and possibly provide the correct code/explain why I was wrong?
Thanks in advance!
HTML:
<!doctype html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'>
<link rel='stylesheet' href='style.css'/>
</head>
<body>
<div class="main">
<div class="container">
<h1>Move</h1>
<p> Form healthy habits to take your fitness to the next level. </p>
Start Now
</div>
</div>
<div class="supporting">
<div class="container">
<div class="col">
<h2>Move</h2>
<p>Become more active by tracking your runs, rides, and walks.</p>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="feature">
<div class="container">
</div>
</div>
</body>
</html>
CSS:
html, body {
margin: 0;
}
h1, h2, a {
font-family: 'Oswald', sans-serif;
}
p {
font-family: Helvetica, Arial, sans-serif;
}
.container {
width: 940px;
margin: 0 auto;
}
/* Main */
.main {
background-image: url ("https://yt3.ggpht.com/-QkqvzArFkYs/AAAAAAAAAAI/AAAAAAAAAAA/qw97foQDUbQ/s900-c-k-no/photo.jpg");
height: 600px;
}
.main h1 {
font-size: 150px;
color: white;
text-align: center;
}
.main p {
font-size: 18px;
}
/* Supporting */
.supporting {
text-align: center;
padding: 50px 0 80px;
}
.supporting .col {
float: left;
width: 28%;
padding: 10px;
}
.supporting h1,
.supporting h2 {
color: #ffa800;
font-size: 20px;
margin-bottom: 10px;
}
.clearfix {
clear: both;
}
.supporting p {
color: #efefef;
margin-bottom: 20px;
line-height: 20px;
font-size: 12px;
}
.supporting .btn {
background-color: #eee;
color: #1c1c1c;
font-size: 18px;
padding: 8px 30px;
text-decoration: none;
display: inline-block;
}
/* Feature */
.feature {
height: 600px;
}
.feature h1,
.feature h2 {
color: #fff;
font-size: 40px;
margin: 0;
padding:50px 0 0;
}
/* Footer */
.footer {
height: 600px;
}
.footer h1,
.footer h2 {
color: #fff;
font-size: 40px;
margin: 0 0 20px 0;
padding:50px 0 0;
}
.footer p {
color: #fff;
margin: 0 0 20px 0;
font-size: 18px;
}
#media (min-width:600px) {
.main h1 {
font-size: 200px;
}
.supporting .col {
width: 30%;
}
.supporting h2 {
font-size: 40px;
}
.supporting p {
font-size: 14px;
}
.feature h2 {
font-size: 60px;
}
}
Remove space between url and ( in your CSS.
Copy paste URL in Browser if u can see it then may be add Id to div and hard code inside div, try to modify image size and style using view element in any one of the popular browsers.
Then create css for id and try it again .. Even I m new to Css but it always works ..
Or replace HTTP instead of HTTP.. if u dont have certificate then may be it will not show up ..
Maybe just remove the space in the CSS?
background-image: url("https://yt3.ggpht.com/-QkqvzArFkYs/AAAAAAAAAAI/AAAAAAAAAAA/qw97foQDUbQ/s900-c-k-no/photo.jpg");
I'm struggling with this project I'm doing for practice. I'm having trouble with the innovation cloud project. Please explain me how to fix this.
I can't manage to get the "Learn More" button to be below the paragraph in the header section.
I can't manage to get the image in the main section to float left of the Header and paragraph.
I also can't manage the jumbotron DIV to appear below main. The image fuses with main, it doesn't appear below it where it should be.
Here is the pen for a visual: http://codepen.io/alejoj/pen/xGBbwv
Thanks for your help.
html, body {
margin: 0;
padding: 0;
}
body {
font-family: 'Roboto', sans-serif;
font-weight: 100;
}
.container {
margin: 0 auto;
max-width: 940px;
padding: 0 10px;
}
/* Header */
.header {
height: 800px;
text-align: center;
background-image: url('https://s3.amazonaws.com/codecademy-content/projects/innovation-cloud/bg.jpg');
background-size: cover;
}
.header .container {
position: relative;
top: 200px;
}
.header h1 {
font-size: 80px;
line-height: 100px;
margin-top: 0;
margin-bottom: 80px;
color: white;
}
#media (min-width:850px) {
.header h1 {
font-size: 120px;
}
}
.header p {
font-weight: 500;
letter-spacing: 8px;
margin-bottom: 40px;
margin-top: 0;
color: white;
}
.btn{
width: 30%;
height: 40px;
border: none;
margin: 25px auto 0 auto;
font-family: 'Roboto', sans-serif;
font-size: 15px;
background-color: black;
color: white;
}
.btn:hover {
background: #117bff;
cursor: pointer;
transition: background .5s;
}
/* Nav */
.nav{
background-color: black;
}
.nav ul {
display: table;
list-style: none;
margin: 0 auto;
padding: 30px 0;
text-align: center;
}
.nav li{
display: cell;
vertical-align: middle;
float: left;
padding-left: 10px;
color: white;
font-family: 'Roboto', sans-serif;
}
/* Main */
.main .container {
margin: 80px auto;
}
.main h2, p{
display: inline-block;
float: left;
}
.main img{
height: 150px;
width: 35%%;
margin: 50px -5px 50px 0px;
display: inline-block;
float: left;
}
/* Jumbotron */
.jumbotron {
margin: 10px 0;
height: 600px;
text-align: right;
background-image:url('https://s3.amazonaws.com/codecademy-content/projects/innovation-cloud/jumbotron_bg.jpg');
}
.jumbotron .container {
position: relative;
top: 220px;
}
/* Footer */
.footer {
font-size: 14px;
}
/* Media Queries */
#media (max-width: 500px) {
.header h1 {
font-size: 50px;
line-height: 64px;
}
.clearfix{
clear: both;
}
.main, .jumbotron {
padding: 0 30px;
}
.main img {
width: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500,100' rel='stylesheet' type='text/css'>
<link rel='stylesheet' href='style.css'/>
</head>
<body>
<div class="header">
<div class="container">
<h1> INNOVATION CLOUD </h1>
<p>CONNECT YOUR IDEAS GLOBALLY</p>
<input class="btn" type="button" value="Learn More">
</div>
</div>
<div class="nav">
<div class="container">
<ul>
<li>Register</li>
<li>Schedule</li>
<li>Sponsors</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="main">
<div class="container">
<img id="mainImage" src="https://s3.amazonaws.com/codecademy-content/projects/innovation-cloud/cloud.svg" />
<h2>The Innovation Cloud Conference</h2>
<p>Connect with the best minds across a wide range of industries to share ideas and brainstorm new solutions to challenging problems.</p>
<p>Hear industry leaders talk about what worked (and what didn't) so that you can save time on your most challenging projects.</p>
<p>Learn about the latest research and technologies that you can use immediately to invent the future.</p>
</div>
</div>
<div class="clreafix"></div>
<div class="jumbotron">
<div class="container">
</div>
</div>
</body>
</html>
Not entirely sure about your desired outcome, but it seems that this css was throwing off a lot of what you want to fix:
.main h2, p {
display: inline-block;
float: left;
}
If you remove that and change the right margin on your image from -5 to 50 it looks pretty good like this: http://codepen.io/anon/pen/BNbyEP
Floating elements can really throw off your layout if you don't "clear" the floats. Sometimes I add a br style="clear:both" after floated elements to keep the flow looking as expected (in the case of not seeing your jumbotron image where it should be)
You have your p set to inline-block. Remove this:
.main h2, p {
display: inline-block;
float: left;
}
You have negative right margin on your image. Change this:
margin: 50px -5px 50px 0px;
to:
margin: 50px 50px 50px 0px;
Not sure what you mean.