I'm practicing in using #media queries. Here is a part of my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="js/script.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="img/sprite.svg" type="image/svg+xml">
</head>
<body>
<header class="page-header">
<div class="page-header__logo-wrap">
<a href="/" class="page-header__logo-link">
<svg class="page_header__tablet-logo" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 147 40" width="147" height="40" id="logotype-white-tablet" y="1948"><image id="logotype-white-tablet-logotype-white-tablet.svg" width="147" xlink:href="data:img/png;base64,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" height="40"/></svg>
</a>
<a href="/" class="page-header__logo-link">
<img src="img/logo_mobile.png" id="mobile-logo">
</a>
<a href="" class="main-nav__toggle">
</a>
</div>
<div class="page-header__nav-wrap">
<nav class="main-nav">
<ul class="main-nav__list">
<li class="main-nav__items main-nav__item--active">Главная</li>
<li class="main-nav__items">Фотографии</li>
<li class="main-nav__items">Конкурс</li>
<li class="main-nav__items">Блог</li>
</ul>
</nav>
</div>
</header>
And here is a part of CSS:
.main-nav,
.promo-download__button,
.price-table__headers,
.phone__text,
.mail-text,
.map-block__text {
font-family: "Open Sans";
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
min-width: 700px;
font-family: "Open Sans";
background-image: url("../img/background.jpg.jpg");
background-repeat: no-repeat;
margin: 0;
}
.page-header {
position: relative;
width: 100%;
height: 114px;
display: flex;
justify-content: space-between;
background-color: rgba(30, 39, 50, 0.63);
}
.page-header #mobile-logo {
display: none;
}
.page-header__nav-wrap {
position: relative;
}
.page-header img {
margin-left: 40px;
margin-top: 34px;
}
#logotype-white-tablet {
transform: translateX(39px) translateY(32px);
}
.page-header::after {
content: "";
background-repeat: no-repeat;
background-image: url('icons/icons.svg');
background-position: 0 -2001px;
width: 59px;
height: 24px;
margin-top: 46px;
margin-right: 40px;
}
.main-nav {
display: flex;
display: none;
position: absolute;
top: 114px;
left: -431px;
width: 100%;
height: 255px;
background-color: #283645;
text-transform: uppercase;
font-weight: bold;
font-size: 18px;
line-height: 32px;
}
.main-nav__items {
list-style-type: none;
flex-grow: 1;
}
.main-nav__items a {
color: #ffffff;
text-decoration: none;
display: block;
margin-top: 14px;
}
.main-nav__items::before {
background-color: #283645;
}
.main-nav__toggle--close {
position: absolute;
top: 0;
font-size: 0;
border: 0;
cursor: pointer;
width: 22px;
height: 22px;
top: -66px;
left: 637px;
}
.main-nav__toggle {
position: absolute;
font-size: 0;
border: 0;
cursor: pointer;
width: 47px;
height: 31px;
display: block;
left: 601px;
top: 43px;
}
.main-nav__toggle--close::before,
.main-nav__toggle--close::after {
content: "";
position: absolute;
width: 26px;
height: 5px;
background-color: #ffffff;
border-radius: 1px;
}
.main-nav__toggle::before {
transform: rotate(226deg);
}
.main-nav__toggle::after {
transform: rotate(136deg);
}
.main-nav__list {
display: flex;
flex-direction: column;
align-items: center;
flex-wrap: wrap;
justify-content: space--around;
background-color: #1e2732;
margin: 0 auto;
width: 100%;
}
.main-nav__list li {
flex-grow: 1;
flex-shrink: 1;
margin-top: 2px;
background-color: #283645;
text-align: center;
width: 107%;
box-shadow: 0 0 2px #050505;
}
#media only screen and (max-width: 320px) {
html,
body {
margin: 0;
padding: 0;
}
body {
background-image: url("../img/background-mobile.jpg");
}
.page-header {
width: 100%;
height: 66px;
position: relative;
z-index: 2;
box-sizing: border-box;
}
#mobile-logo {
display: block !important;
position: absolute;
top: -9px;
left: -15px;
z-index: 1;
}
#logotype-white-tablet {
display: none;
}
.promo-download__title {
display: none;
}
.os-nav {
display: none;
}
.os-nav__title {
display: none;
}
}
When I resize window to 320px (or using chrome toggle-device mode and set it to iphone) #media query works but it seems that viewport doesn't. I still can see horizontal scrollbar and parts of "big" header for 700px width. I have already read and tried most of decisions such as:
Adding meta tags (one by one) like in this question and others relative to this problem: My meta viewport doesn't work
Adding the specific width:
<meta name="viewport" content="width=320px, initial-scale=1.0">
Or maybe viewport is not the main problem and I have made something wrong in CSS grid construction?
Instead of fixing your HTML body to min-width: 700px;, use percentages for width. The media query rule content="width=device-width, initial-scale=1" will not have effect if you forcibly set page width:
For example:
body { min-width: 75%; }
You can also use variety of CSS frameworks, which handle all of those (and many other) problems, i.e. Bootstrap 3, Zurb Foundation, etc.
In your CSS, you are adding
body { min-width: 700px; }
This makes your section to fix at 700px even though your screen is at 320px. Try changing the width of body to smaller width or put them in percentages:
body { min-width: 320px; }
or
body { min-width: 90%; }
Related
This is only happening in Chrome, not Firefox or IE -
I have three images with text overlayed. The three images are responsive, and take up the full width of the browser window. Here's a screenshot:
When I resize the window to make it narrower, somehow, the html is becoming smaller than the size of the page. For example, here:
This only happens very quickly before the window seems to readjust, and everything is fine. However, I'd still like to fix it.
I've tried using a flexbox footer instead of the vh method but that didn't help.
My HTML and CSS are below. A note about the HTML - I'm sure there is another way to get the three pictures to fit together without any whitespace besides cramming the HTML all together like it is - sorry for being a hack. But that's not the source of the problem, as far as I can tell - it happens when there is only one picture as well.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<link href="styles/index-footer-test-750.css" type="text/css" rel="stylesheet">
<title>Good Boy Dog Care</title>
</head>
<body>
<div class="index-content">
<div id="we-love-dogs-one"><img id="we-love-dogs-one-image" src="images/cute-dog-one-cropped.jpg"><div id="we-love-dogs-one-text"><p>WE</p></div></div><div id="we-love-dogs-two"><img id="we-love-dogs-two-image" src="images/cute-dog-two-cropped.jpg"><div id="we-love-dogs-two-text"><p>LOVE</p></div></div><div id="we-love-dogs-three"><img id="we-love-dogs-three-image" src="images/cute-dog-three-cropped.jpeg"><div id="we-love-dogs-three-text"><p>DOGS</p></div></div>
</div>
<div class="footer">
</div>
</body>
</html>
And CSS:
* {
box-sizing: border-box;
margin: 0;
}
.index-content {
min-height: calc(100vh - 2em);
padding: 0;
margin: 0;
}
.footer {
height: 2em;
background-color: rgba(240, 100, 60, 1);
width: 100%;
cursor: default;
}
#we-love-dogs-one {
width: 34%;
display: inline-block;
margin: 0;
position: relative;
text-align: center;
}
#we-love-dogs-one-image {
width: 100%;
height: auto;
display: block;
float: left;
}
#we-love-dogs-one-text {
left: 0;
position: absolute;
width: 100%;
color: white;
top: calc(50% - 17px);
font-size: 1.5em;
display: inline-block;
font-family: "Montserrat";
}
#we-love-dogs-two {
width: 33%;
display: inline-block;
margin: 0;
position: relative;
text-align: center;
font-family: "Montserrat";
}
#we-love-dogs-two-image {
width: 100%;
height: auto;
display: block;
float: left;
}
#we-love-dogs-two-text {
left: 0;
position: absolute;
width: 100%;
color: white;
top: calc(50% - 24.5px);
font-size: 2em;
display: inline-block;
font-family: "Montserrat";
}
#we-love-dogs-three {
width: 33%;
display: inline-block;
margin: 0;
position: relative;
text-align: center;
}
#we-love-dogs-three-image {
width: 100%;
height: auto;
display: block;
float: left;
}
#we-love-dogs-three-text {
left: 0;
position: absolute;
width: 100%;
color: white;
top: calc(50% - 17px);
font-size: 1.5em;
display: inline-block;
font-family: "Montserrat";
}
Any help would be appreciated. Thanks!
cliffgallagher# , try using divs to auto resize rather than hardly setting the width or height per image, here is an example post: How do I auto-resize an image to fit a div container.
img {
max-width: 100%;
max-height: 100%;
}
.portrait {
height: 80px;
width: 30px;
}
.landscape {
height: 30px;
width: 80px;
}
.square {
height: 75px;
width: 75px;
}
Portrait Div
<div class="portrait">
<img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>
Landscape Div
<div class="landscape">
<img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>
Square Div
<div class="square">
<img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>
I have a strange behavior when I'm using a CSS table and a black layer that is with position absolute on top of the table in HTML.
When the layer is enabled, (display: block), then it's destroying the layout. But when I disable is (display: none), everything is fine.
Here is a small example (you have to change the css through the developer tools). Is there something that I forgot to set, etc?
It's not possible to use flexbox instead of the table!
html,
body {
width: 100%;
height: 100%;
}
body {
display: table;
table-layout: fixed;
}
#menu {
display: none;
background: #28292D;
width: 200px;
position: fixed;
left: -300px;
top: 0;
height: 100%;
text-align: center;
padding-left: 15px;
padding-right: 15px;
z-index: 3;
}
#blackLayer {
background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0;
display: none;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 2;
height: 1265px;
display: block;
}
#sidebar {
display: table-cell;
vertical-align: top;
width: 223px;
background: #3d464d none repeat scroll 0 0;
}
#content {
display: table-cell;
vertical-align: top;
background: #f0f0f0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="menu"></div>
<div id="blackLayer"></div>
<div id="sidebar"></div>
<div id="content"></div>
</body>
</html>
Updated:
I think your markup is wrong. Wrap the #sidebar and #content in another #container and give it a display:flex; and position:absolute; and a min-height:100%;. Flex's align-items:stretch; will make your sidebar and content stretch their height to the parent height.
Try like this:
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
#container {
display: flex;
width: 100%;
min-height: 100%;
position: absolute;
flex-direction: row; /* children will fall side by side like columns */
align-items: stretch; /* children will stretch to my height */
}
#menu {
display: none;
background: #28292D;
width: 200px;
position: fixed;
left: -300px;
top: 0;
height: 100%;
text-align: center;
padding-left: 15px;
padding-right: 15px;
z-index: 3;
}
#blackLayer {
background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0;
display: none;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 2;
height: 100%;
display: block;
}
#sidebar {
width: 223px;
background: #3d464d none repeat scroll 0 0;
}
#content {
flex: 1 0; /* Now I will take remaining space left by my sister Ms. #sidebar */
background: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="menu"></div>
<div id="blackLayer"></div>
<div id="container">
<div id="sidebar"></div>
<div id="content"></div>
</div>
</body>
</html>
I am trying to make a div a clickable link and was told it is better to put the link inside the div rather than around the div. I noticed that whenever I mouseover one of the divs the webpage suddenly gains an extra 500 or so pixels on the right.
The page isn't supposed to be scrollable, and you can only scroll by holding the middle mouse button and dragging. This happens in Chrome 41.0.2272.101 and Opera 28, but NOT in Firefox 36.0.4.
Here is my code.
HTML5:
<!DOCTYPE html>
<html lang='en'>
<head>
<title>John Doe</title>
<link type='text/css' rel='stylesheet' href='stylesheet.css'/>
<script type='text/javascript' src='jquery-1.11.2.js'></script>
<script type='text/javascript' src='scripts.js'></script>
<meta charset='utf-8'>
<meta name='description' content='Portfolio website displaying projects by John Doe.'>
<meta name='keywords' content='Portfolio, John Doe, Projects, Software'>
<meta name='author' content='John Doe'>
</head>
<body>
<!-- Top welcome bar. Holds name and description of profession(s). -->
<div id='welcome_bar'>
<div id='welcome_bar_name'>John Doe</div>
<p id='welcome_bar_description'>Software Engineer</p>
</div>
<!-- Holds all the navigation "blocks" leading to the about, portfolio,
contact, and [unused page] pages. -->
<div id='nav_block'>
<div id='block_list'>
<div class='block_container'>
<div id='left_out' class='block'>
<a href='webpages/about/about.html'>
<!-- Short description of page this block leads to "who I am". -->
<div id='about_description' class='block_description'>
<p>who I am</p>
</div>
<p class='block_title'>About Me</p>
<div class='block_icon_container'>
<img class='block_icon' src='images/about_icon.png' alt='about_icon.png'/>
</div>
</a>
</div>
</div>
<div class='block_container'>
<div id='left_in' class='block'>
<a href='#'>
<!-- Short description of the page this block leads to "what I am proud of". -->
<div id='portfolio_description' class='block_description'>
<p>what I am proud of</p>
</div>
<p class='block_title'>Portfolio</p>
<div class='block_icon_container'>
<img class='block_icon' src='images/portfolio_icon.png' alt='portfolio_icon.png'/>
</div>
</a>
</div>
</div>
<div class='block_container'>
<div id='right_in' class='block'>
<a href='#'>
<div id='sparepage_description' class='block_description'>
<p>stuff stuffs</p>
</div>
<p class='block_title'>Stuff Stuff</p>
<div class='block_icon_container'>
<img class='block_icon' src='images/stuffstuff_icon.png' alt='stuffstuff_icon.png'/>
</div>
</a>
</div>
</div>
<div class='block_container'>
<div id='right_out'class='block'>
<a href='#'>
<div id='contact_description' class='block_description'>
<p>let's chat</p>
</div>
<p class='block_title'>Contact</p>
<div class='block_icon_container'>
<img class='block_icon' src='images/contact_icon.png' alt='contact_icon.png'/>
</div>
</a>
</div>
</div>
</div>
</div>
</body>
</html>
CSS3:
html {
margin: 0;
padding: 0;
max-width: 100%;
height: 100%;
overflow: hidden;
}
body {
margin: 0;
padding: 0;
max-width: 100%;
height: 100%;
background-color: white;
}
#welcome_bar {
position: relative;
top: 10%;
left: 12.5%;
padding: 0;
width: 75%;
height: 10%;
box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.5);
}
#font-face {
font-family: "Roboto Regular";
src: url("fonts/Roboto-Regular.ttf");
}
#welcome_bar_name {
position: relative;
left: 5px;
top: 5px;
padding-left: 10px;
width: 75%;
height: 50%;
font-family: Roboto Regular;
color: rgba(0, 0, 0, 0.65);
font-size: 3em;
}
#welcome_bar_description {
position: relative;
left: 8px;
top: -15px;
padding-left: 10px;
width: 35%;
height: 20%;
font-family: Roboto Regular;
color: rgba(0, 0, 0, 0.5);
font-size: 1.5em;
}
#nav_block {
position: relative;
top: 12%;
left: 12.5%;
padding: 0;
width: 75%;
height: 68%;
}
#block_list {
display: table;
position: relative;
top: 5%;
padding: 0;
width: 100%;
height: 90%;
}
.block_container {
display: table-cell;
width: 22%;
height: 100%;
}
.block {
height: 100%;
position: relative;
}
.block a {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-decoration: none;
z-index: 10;
}
#left_out {
width: 99%;
background-color: #00AE93;
}
#left_in {
width: 98%;
margin-left: 1%;
margin-right: 1%;
background-color: #9CA645;
}
#right_in {
width: 98.5%;
margin-left: 1%;
margin-right: 1%;
background-color: #EDB613;
}
#right_out {
width: 99%;
margin-left: 1.2%;
background-color: #D55435;
}
#about_description {
position: relative;
top: 10%;
width: 90%;
height: 5%;
background-color: white;
}
#portfolio_description {
position: relative;
top: 20%;
width: 90%;
height: 5%;
background-color: white;
}
#sparepage_description {
position: relative;
top: 10%;
width: 90%;
height: 5%;
background-color: white;
}
#contact_description {
position: relative;
top: 25%;
width: 90%;
height: 5%;
background-color: white;
}
#font-face {
font-family: "Ubuntu M";
src: url("fonts/Ubuntu-M.ttf");
}
#about_description p {
text-align: center;
vertical-align: middle;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: Ubuntu M;
font-size: 1.25em;
color: #00AE93;
}
#portfolio_description p {
text-align: center;
vertical-align: middle;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: Ubuntu M;
font-size: 1.25em;
color: #9CA645;
}
#sparepage_description p {
text-align: center;
vertical-align: middle;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: Ubuntu M;
font-size: 1.25em;
color: #EDB613;
}
#contact_description p {
text-align: center;
vertical-align: middle;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: Ubuntu M;
font-size: 1.25em;
color: #D55435;
}
.block_icon_container {
top: 48%;
position: relative;
margin: 0 auto;
padding: 3px;
}
#font-face {
font-family: "Ubuntu L";
src: url("fonts/Ubuntu-L.ttf");
}
.block_title {
position: relative;
max-width: 100%;
top: 45%;
height: auto;
color: white;
font-size: 1.5em;
font-family: Ubuntu L;
text-align: center;
}
.block_icon {
margin: 0;
padding: 0;
max-width: 100%;
opacity: 0.6;
}
Under .block a, I noticed that if you remove the width, the page doesn't expand when you mouse over the block. The size of the percentage seems to effect how far the page is expanded as well.
This bug probably wouldn't be noticed unless visitors randomly scrolled using the middle mouse button, but it bugs me.
As a homework for school I'm creating a website but a div
.container {
padding: 0px;
margin: 0px;
border: 0px;
position: absolute;
top: 70vw;
width: 100vw;
} is getting out the window, because of this the h1.titolo {
font-family: musei;
color: #555555;
font-size: 4vw;
text-align: center;
display: block;
margin: 0 auto;
}put inside it makes the h1 and a
form
.map {
display: block;
margin: 0 auto;
} put inside the div aswell, not centered on all resolutions.
Why doesn't the div is a little bit larger instead of taking the excat width of the window even if i wrote 100vw?
Here's the full HTML/CSS code
.immag {
max-width: 100%;
height: auto;
position: absolute;
top: 0px;
left: 0px;
}
.map {
display: block;
margin: 0 auto;
}
.titolo {
font-family: musei;
color: #555555;
font-size: 4vw;
text-align: center;
display: block;
margin: 0 auto;
}
.container {
padding: 0px;
margin: 0px;
border: 0px;
position: absolute;
top: 70vw;
width: 100vw;
}
.border {
background-color: #ebebeb;
margin: 0 auto;
width: 300px;
border-style: ridge;
border-color: #00c4ff;
border-width: 1vw;
width: 20vw;
height: auto;
}
#font-face {
font-family: musei;
src: url(font-titolo-musei.otf);
}
html {
overflow-y: scroll;
}
.over {
overflow-y: hidden;
width: 200vw;
}
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
<link rel="shortcut icon" href="favicon.ico" >
<title>1CE</title>
</head>
<body>
<img src="Senza%20titolo-1.jpg" class="immag">
<div class="container">
<div class="border">
<h1 class="titolo">MUSEI</h1>
</div><br>
<iframe class="map" src="https://mapsengine.google.com/map/embed?mid=zi8GElmpTlNo.kJ3GnRl1X08c" width="640" height="480"></iframe>
</div>
</body>
</html>
Using 100vw will always make the site take up the entire viewport, however a scrollbar is also part of the viewport and will make what is displayed smaller than the actual viewport. using width:100% will solve your problem with the scrollbar being in the way.
my code is all jumbled up I believe. I have a ton of white space down at the bottom of my page and I don't know why. I've basically just been going with whatever works thus far but I also want my page to be responsive and it scales really weird atm. This is probably a really hard question to help with but if anyone can I would be super grateful. Any suggestions on what to do are extremely appreciated.
Heres the code:
http://jsbin.com/rugidepebe/1/edit?html,css,output
HTML
<!Doctype html>
<html>
<head>
<title>Application</title>
<link rel="stylesheet" type="text/css" href="standard.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="margin-right">
</div>
<div id="margin-left">
</div>
<div id="navbar">
</div>
<div id="contenthead">
<h1 id="AppHead">Application</h1>
</div>
<div id="appbike">
<h2>Walk/Bike</h2>
<img src="images/bike.png" id="bike"/>
</div>
<div id="appmotor">
<h2>Motor</h2>
<img src="images/car.png" id="car"/>
</div>
</body>
</html>
CSS
body {
margin: 0px;
}
#navbar {
position: fixed;
width: 100%;
height: 50px;
background-color: #0C4564;
z-index: 3;
}
#margin-right {
position: absolute;
height: 150%;
width: 7.8125%;
background-color: #6FE3C2;
right: 0;
z-index: 1;
}
#margin-left {
position: absolute;
height: 150%;
width: 7.8125%;
background-color: #6FE3C2;
z-index: 2;
}
#AppHead {
text-align: center;
text-decoration: underline;
font-family: 'Open Sans', sans-serif;
font-size: 3.5em;
font-weight: 600;
color: #575757;
}
#contenthead {
display: inline-block;
width: 100%;
margin-top: 50px;
margin-bottom: 10px;
}
#appbike {
position: relative;
width: 15%;
height: 500px;
background-color: #53A78F;
text-align: center;
margin-left: 25%;
margin-top: 5%;
}
#bike {
width: 70%;
position: relative;
margin-top: 50%;
}
#appmotor {
position: relative;
bottom: 10;
float: right;
width: 15%;
height: 500px;
background-color: #53A78F;
bottom: 498px;
margin-right: 25%;
}
h2 {
text-align: center;
text-decoration: underline;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
font-size: 2 em;
}
#car {
width: 70%;
position: relative;
margin-top: 50%;
text-align: center;
margin-left: 15%;
}
You still have to treat the hmtl & body as wrappers sometimes, you're setting the height to 150%, of which it's parent height is auto so it is a bit confused. Just change your first rule to the following:
body, html {
margin: 0px;
padding:0;
height:100%;
}
Adding in height 100% should fix your issue, also added in padding:0; and the html doc to the css selector.