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.
Related
I'm trying to finish off our rehoming page, where a visitor clicks on an animal to open an iframe with more info output from our database. But I can't get the iframe scrollable. I've searched online extensively but can't get any of the suggestions to work.
What am I doing wrong? (I'm way out of my league with code but just doing the best I can with what I find online, so I may have made some basic errors.) Any help at all is greatly appreciated.
HTML:
<!DOCTYPE html>
<html lang="en">
<title>iFrame</title>
<script>
asm3_adoptable_filters = "size agegroup sex breed species";
asm3_adoptable_extra = function(a) {
return '<span class="waitingtime">Time waiting for a home: ' + a.TIMEONSHELTER + '</span>';
}
asm3_adoptable_iframe = true;
asm3_adoptable_iframe_fixed = true;
asm3_adoptable_translations = {
"(any sex)": "Any sex",
"(any size)": "Any size",
"(any breed)": "Any breed",
"(any age)": "Any age",
"(any species)": "Any species"
}
asm3_adoptable_sort = "-#DAYSONSHELTER";
</script>
<style>
.waitingtime {
color: black;
font-family: filson soft regular,sans-serif;
</style>
<div id="asm3-adoptables"></div>
<script src="https://service.sheltermanager.com/asmservice?method=animal_view_adoptable_js&account=sm1510"
></script>
Page CSS:
#asm3-adoptable-iframe-overlay{
background-color: rgba(0 0 0 / 57%) !important;
}
#asm3-adoptable-iframe{
overflow-y: scroll !important;
width: 479px !important;
max-width: 100%;
margin: 0 auto;
display: block;
height: 90vh !important;
background-color:white;
margin-top:3em;
}
#asm3-adoptable-iframe-close{
background-color: #c92327;
color: white;
padding: 7px 23px;
/* margin-top: 39px !important; */
position: absolute;
border-radius: 5px;
text-align: center;
right: 0;
left: 0;
margin-top: 34px;
width: 200px;
margin: 0 auto;
top:44px;
}
Element CSS:
.asm3-adoptable-item {
display: inline-block;
text-align: center;
background-color: white;
margin-bottom: 12px;
padding-top: 25px;
width: 31.8%;
margin: 10px;
}
.asm3-adoptable-item:hover {
background-color: black;
}
.asm3-adoptable-item:hover .asm3-adoptable-tagline {
color: white;
}
.asm3-adoptable-name {
font-family: "proxima soft extrabold", sans-serif;
font-size: 44px;
color: #c92327;
margin-top: -16px;
display: block;
}
.asm3-adoptable-tagline {
text-transform: lowercase;
font-family: "proxima soft extrabold",sans-serif;
font-size: 18px;
color: black;
margin-top: -10px;
display: block;
}
.asm3-adoptable-item:hover .asm3-adoptable-name {
color: #c92327;
}
.asm3-adoptable-item:hover .waitingtime {
color: white;
}
.asm3-adoptable-thumbnail {
margin-top: 15px;
width: 425px;
max-width: 100%;
height: 425px;
}
.asm3-adoptable-reserved {
position: relative;
color: white;
display: inline-block;
padding: 5px;
overflow: hidden;
font-family: "proxima soft extrabold", sans-serif;
font-size: 18pt;
}
.asm3-adoptable-reserved span:before {
content: "RESERVED";
}
.asm3-adoptable-reserved span {
position: absolute;
display: inline-block;
right: -60px;
text-align: center;
top: 50px;
background: #c92327;
width: 275px;
transform: rotate(45deg);
}
#asm3-adoptable-filters {
overflow:hidden;
}
#asm3-adoptable-filters select {
width: 17%;
float: left;
margin: 20px;
}
#asm3-adoptable-filters {
font-family: "proxima soft extrabold", sans-serif;
font-size: 22px;
background-color: #dab348;
}
.asm3-adoptable-list {
display: flex;
flex-wrap: wrap;
}
#media only screen and (max-width: 992px) {
.asm3-adoptable-item {
width:50%;
}
}
#media only screen and (max-width: 768px) {
.asm3-adoptable-item {
width:100%;
}
}
You are missing a closing bracket "}" in your <style> tags. After playing around with your website a little I believe you are talking about some sort of full screen modal. But then it seems you are using a iframe in the modal. You might consider not using an iframe because there is really no need and it may solve your problems. Another thing I noticed is that you don't have any links between your html and your css which you might want to look into.
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%;
}
im getting a white space when im putting text into the div. How to remove that ? i would like to ask you aswell how to make the text "welkom op dennis website" automatic center in the middle of the div.
here you can see the code :
.container {
max-width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
display: inline-block;
}
html,
body {
margin: 0px;
padding: 0px;
}
.nav {
height: 5%;
width: 100%;
background-color: white;
}
.top {
height: 40%;
width: 100%;
background-color: #1E90FF;
}
.nav {
background-color: #444;
}
.nav a {
display: inline-block;
background-color: #444;
font-family: Arial;
padding: 10px 20px;
text-decoration: none;
color: white;
float: right;
}
.nav a:hover {
background-color: #1E90FF;
}
.logo {
color: white;
display: inline-block;
padding: 10px 20px;
font-family: Arial;
text-decoration: none;
}
p.center {
padding: 150px 550px;
color: white;
font-family: Arial;
font-size: 25px;
{}
<header>
<title>Dennis Zwart Home Pagina</title>
<link href="css/MyStyle.css" rel="stylesheet" style="css" />
</header>
<body>
<div class="container">
<div class="nav">
<text class="logo">Dennis Zwart</text>
Contact
Games
Foto's
Hobby's
Home
</div>
<div class="top">
<p class="center">Welkom op de website van Dennis Zwart</p>
</div>
</div>
</body>
The space between your navigation and blue text field is from collapsing margins. You'll need to remove the margins created by your <p> element in .top, more on Collapsing Margins.
If you need the text vertically centered as well, you can use relative positioning and translate.
Other Notes
<text> is not a valid HTML element, use <p>, <span>, <div>, <a> etc. instead. I switched it to an <a> in my answer.
I see that you're using percentage heights. Those can be tricky. In order for percentage heights to work a height has to be set on the parent element. If that parent element's height is a percentage, then it's parent needs a height set. So on and so forth all the way to the root element <html> if percentages are used. In my answer I switch the heights to px values.
A number of block level elements (<div>, <nav>) had width: 100%; applied to them, I removed them as they're not needed. A block level element will always take up 100% width of it's containing element by default.
To vertically center your navigation items I set the line-height of the <a> elements equal to the height of the <nav> element.
I removed your .container element as it wasn't doing anything useful. You might need it later (likely in a different location) if you decide to add media queries and limit it's width for various viewport sizes.
html,
body {
margin: 0px;
padding: 0px;
}
.nav {
height: 45px;
background-color: white;
}
.top {
height: 300px;
background-color: #1E90FF;
}
.nav {
background-color: #444;
}
.nav .logo {
float: left;
}
.nav a {
display: inline-block;
background-color: #444;
font-family: Arial;
padding: 0 20px;
text-decoration: none;
line-height: 45px;
color: white;
float: right;
}
.nav a:hover {
background-color: #1E90FF;
}
p.center {
position: relative;
top: 50%;
transform: translateY(-50%);
margin: 0;
color: white;
font-family: Arial;
font-size: 25px;
text-align: center;
}
<header>
<title>Dennis Zwart Home Pagina</title>
<link href="css/MyStyle.css" rel="stylesheet" style="css" />
</header>
<body>
<div class="nav">
<a class="logo" href="#">Dennis Zwart</a>
Contact
Games
Foto's
Hobby's
Home
</div>
<div class="top">
<p class="center">Welkom op de website van Dennis Zwart</p>
</div>
</body>
This is because p element has natural margins (defined by browser). Remove it:
p {
margin-top: 0;
}
Then remove the p horizontal padding and center your text with
text-align: center;
In order to remove the blank area on the right side of the screen.
p {
margin-top: 0;
text-align: center;
}
.container {
max-width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
display: inline-block;
}
html,
body {
margin: 0px;
padding: 0px;
}
.nav {
height: 5%;
width: 100%;
background-color: white;
}
.top {
height: 40%;
width: 100%;
background-color: #1E90FF;
}
.nav {
background-color: #444;
}
.nav a {
display: inline-block;
background-color: #444;
font-family: Arial;
padding: 10px 20px;
text-decoration: none;
color: white;
float: right;
}
.nav a:hover {
background-color: #1E90FF;
}
.logo {
color: white;
display: inline-block;
padding: 10px 20px;
font-family: Arial;
text-decoration: none;
}
p.center {
padding: 150px 0px;
color: white;
font-family: Arial;
font-size: 25px;
}
<header>
<title>Dennis Zwart Home Pagina</title>
<link href="css/MyStyle.css" rel="stylesheet" style="css" />
</header>
<body>
<div class="container">
<div class="nav">
<text class="logo">Dennis Zwart</text>
Contact
Games
Foto's
Hobby's
Home
</div>
<div class="top">
<p class="center">Welkom op de website van Dennis Zwart</p>
</div>
</div>
</body>
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.