Why does the width of my site stretch to the edges of the browser in Internet Explorer? What am I missing?
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%; }
.site-main {
padding: 10vw 10vw 5vw;
max-width: 1110px; }
#media (min-width: 1440px) {
.site-main {
padding: 154px 154px 77px;
margin-left: auto;
margin-right: auto; } }
#media (max-width: 760px) {
.site-main {
padding: 5vw 5vw 5vw; }
}
I believe this code covers the relevant parts.
#jeremy, please check the below working example in your browser(based on your css, with some minor modifications) and see if that issue still exists.
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.site-main {
padding: 10vw 10vw 5vw;
max-width: 1110px;
margin-left: auto;
margin-right: auto;
}
#media (min-width: 1440px) {
.site-main {
padding: 154px 154px 77px;
}
}
#media (max-width: 760px) {
.site-main {
padding: 5vw 5vw 5vw;
}
}
<div class="site-main" style="background: #eee"> </div>
Padding just puts space around the content, but not around the edges of the div with your site-main class.
Here is a fiddle with your code, changed padding to margin, and some color added to show the difference:
https://jsfiddle.net/qxp098j3/4/
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.site-main {
margin: 10vw 10vw 5vw;
max-width: 1110px;
background-color:Blue;
}
#media (min-width: 1440px) {
.site-main {
margin: 154px 154px 77px;
}
}
#media (max-width: 760px) {
.site-main {
margin: 5vw 5vw 5vw;
}
}
<body>
<div class="site-main">
blah blah blah
</div>
</body>
Related
Im so new in CSS and trying to fix the following code..
I want a simple thing where the screen size is smaller than 400 change the image size..
it should work but it doesn't..
I tried to make
* {
box-sizing: border-box;
}
body, html {
background: #fff;
height: 100%;
margin: 10px;
}
.left__img2 {
position: absolute;
float: left;
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
border-radius: 20px;
width: 600px;
height: 400px;
}
#media screen and (max-width: 500px) {
.left__img2 {
width: 10px;
}
}
Media queries at the top of the CSS need !important to over rule the media query. Media queries at the bottom do not need !important. I placed the query at the top so I used !important to over rule any other style after.
#media screen and (max-width: 500px) {
.left__img2 {
width: 10px !important;
}
}
* {
box-sizing: border-box;
}
body, html {
background: #fff;
height: 100%;
margin: 10px;
}
.left__img2 {
position: absolute;
float: left;
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
border-radius: 20px;
width: 600px;
height: 400px;
}
I think this will work.
#media screen and (max-width: 500px) {
.left__img2 {
max-width: 10px;
}
}
Your code works well in the following example (resize your window), maybe it comes from a side effect of the rest of your code, can you show us the rest of your code?
.left__img2 {
position: absolute;
float: left;
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
border-radius: 20px;
width: 600px;
height: 400px;
background-color: red;
}
#media screen and (max-width: 500px) {
.left__img2 {
width: 10px;
background-color: yellow;
}
<div class="left__img2"><div>
https://blendbee.com
This is a WordPress site. The top part of the header needs some styling improvements for smaller screen sizes:
Center the logo
Some padding or margin above the logo (so it doesn't touch the top bar)
Less whitespace above and below the menu icon
Here's the current HTML code:
<div class="header-wrap">
<header id="header" class="site-header " role="banner">
<div class="row">
<div class="large-12 small-12 columns">
<div class="logo">
<a href="https://blendbee.com/" title="BlendBee – Your Tea. Your Way." rel="home">
<img data-interchange="[https://blendbee.com/wp-content/uploads/2014/06/BlendBee-Logo-and-Tagline-2.png, (default)], [https://blendbee.com/wp-content/uploads/2014/06/BlendBee-Logo-and-Tagline-2.png, (retina)]" alt="" class="hideie" data-uuid="60a3bc00-c94c-c4ba-258c-a9faa107e418" src="https://blendbee.com/wp-content/uploads/2014/06/BlendBee-Logo-and-Tagline-2.png">
<img src="https://blendbee.com/wp-content/uploads/2014/06/BlendBee-Logo-and-Tagline-2.png" alt="" class="ie">
<noscript><img src='https://blendbee.com/wp-content/uploads/2014/06/BlendBee-Logo-and-Tagline-2.png' alt='BlendBee – Your Tea. Your Way.'></noscript>
</a>
</div>
<div id="mobile-menu-button" class="show-for-small">
<a class="secondary button" id="mobileMenuButton" href="#mobile-menu">
<span class="mobile-menu-icon"></span>
<span class="mobile-menu-icon"></span>
<span class="mobile-menu-icon"></span>
</a>
</div>
</div>
</div>
</header>
</div>
And related CSS:
#media screen and (max-width: 767px) {
.mix.half.mix_all {
width: 50%;
float: left;
}
.mix.mix_all {
width: 100%;
}
.sidebar.large-3.small-12.columns {
width: 100%;
float: none;
}
#soc-icons-wrap.closed {
margin-bottom: 20px;
height: 50px;
}
.large-6.small-12.columns p{
width: 100% !important;
}
#header.scroll-to-fixed {
position: static;
}
}
#mobile-menu-button .button {
margin-bottom: 0;
padding: 0.75em 0.5em;
width: auto
}
.mobile-menu-icon {
background: #fff;
height: 0.25em;
width: 2.5em;
display: block;
}
.mobile-menu-icon + .mobile-menu-icon {
margin: 0.25em 0 0
}
#media only screen and (min-width: 767px) {
body.admin-bar #header.scroll-to-fixed {
top: 32px;
}
}
#media only screen and (max-width: 767px) {
.logo {
float: none;
text-align: center;
}
#header.scroll-to-fixed {
position: static !important;
height: auto;
width: auto;
border-bottom: none;
}
#header.scroll-to-fixed .logo {
width: 300px;
padding-top: 20px;
position: static;
top: 0;
margin: 0 auto;
}
#header.scroll-to-fixed .logo img {
max-height: 140px;
width: 100%;
-webkit-transition: none;
-moz-transition: none;
transition: none;
}
#mobile-menu .tiled-menu {
float: none;
margin: 0;
padding: 0;
}
#mobile-menu .main-menu-item {
float: none;
width: 100% !important;
}
#mobile-menu .menu-tile {
height: 60px !important;
background-image: none !important;
}
#mobile-menu .item-title,
#mobile-menu .tiled-menu > .menu-item-language > a {
top: 5px;
font-size: 20px;
left: 25px;
}
#mobile-menu .tile-icon,
#mobile-menu .tiled-menu > .menu-item-language:before {
right: 10%;
width: auto;
}
#mobile-menu .tiled-menu > .menu-item-language {
height: 60px !important;
}
#mobile-menu .style-metro .sub-menu {
padding-top: 3px;
}
}
#media only screen and (min-width: 640px) and (max-width: 1024px) {
.tiled-menu .sub-menu {
position: absolute;
}
.tiled-menu {
text-align: center;
}
.main-menu-item {
text-align: left;
}
.tiled-menu .metro-menu-item .sub-menu {
position: absolute;
}
}
wrapper i {
margin: 84px 0 0 110px;
}
.entry-header .entry-meta .entry-tags {
margin-left: 0;
}
.large-12.small-12.columns .large-8.small-12.columns .large-6.small-12.columns {
position: relative;
top: 12px;
}
.large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns .answer {
width: 33%;
margin-top: 20px;
}
.large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns .answer input {
padding: 18px 5px;
}
.large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns {
width: 13%;
margin-top: 20px;
}
.large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns.answer{
width: 33%;
margin-top: 20px;
}
.site-header {
border-bottom: none;
}
ol ul, ul ol, ul ul, ol ol {
-webkit-margin-before: 0px;
-webkit-margin-after: 10px;
}
.large-12.small-12.columns .large-8.small-12.columns .large-6.small-12.columns p {
float: left;
width: 70%;
text-align: left;
margin-top: 0;
}
#media only screen and (min-width: 320px) and (max-width: 767px) {
.tiled-menu {
left: -3px !important;
}
.tiled-menu>li>ul {
padding-top: 0;
}
}
#media screen and (max-width: 320px) {
.large-12.small-12.columns .large-8.small-12.columns .large-6.small-12.columns{
text-align: center;
}
.large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns{
margin-left: 28%;
margin-top: 0;
width: 52%;
}
.large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns.answer{
margin-top:0 ;
}
.large-3.small-12.columns input{
width: 145px;
}
}
#media screen and (min-width: 321px) and (max-width: 480px) {
.large-12.small-12.columns .large-8.small-12.columns .large-6.small-12.columns{
text-align: center;
}
.large-12.small-12.columns .large-8.small-12.columns .large-6.small-12.columns{
text-align: center;
}
.large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns{
margin-left: 36%;
margin-top: 0;
width: 35%;
}
.large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns.answer{
margin-top:0 ;
}
.large-3.small-12.columns input{
width: 148px;
}
}
#media screen and (min-width: 480px) and (max-width: 800px) {
.site-header .logo {
margin: 0 auto 20px;
}
.site-header.scroll-to-fixed .logo {
margin: 0;
}
}
#media screen and (min-width: 481px) and (max-width: 568px) {
.large-12.small-12.columns .large-8.small-12.columns .large-6.small-12.columns{
text-align: center;
}
.large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns{
margin-left: 38%;
margin-top: 0;
width: 30%;
}
.large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns.answer{
margin-top:0 ;
}
.large-3.small-12.columns input{
width: 149px;
}
}
#media screen and (min-width: 569px) and (max-width: 600px) {
.category-submenu .sub-nav .sub-nav dd {
margin-left: 0.8rem !important;
margin-bottom: 0;
}
.mix .entry-thumbnail img {
width: 100% !important;
}
.large-12.small-12.columns .large-8.small-12.columns .large-6.small-12.columns{
text-align: center;
}
.large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns{
margin-left: 38%;
margin-top: 0;
width: 28%;
}
.large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns.answer{
margin-top:0 ;
}
.large-3.small-12.columns input{
width: 148px;
}
.pricetable-column {width: 50% !important;}
}
#media screen and (min-width: 768px) and (max-width: 800px) {
.large-12.small-12.columns .large-8.small-12.columns .large-6.small-12.columns p{
float: left;
width: 56%;
text-align: left;
margin-top: 0;
}
.large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns {
width: 13%;
margin-top: 20px;
}
.large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns.answer{
width: 26%;
margin-top: 20px;
}
}
#media screen and (min-width: 768px) and (max-width: 1000px) {
.logo {
float: none;
margin: 0 auto;
}
#header.scroll-to-fixed .logo {
display: none;
}
.main-menu-item {
display: inline-block;
margin-left: 0;
float: none;
text-align: left;}
.tiled-menu {
float: none;
text-align: center;
}
}
#media screen and (min-width: 640px) and (max-width: 767px) {
.tiled-menu>li>ul {
padding-top: 25px;
}
}
If anyone can help, I'd be much appreciative - thanks :)
First - Try using this code for centering your logo and adding some padding to the top:
.logo {
padding-top: 50px;
width: 280px;
margin: auto;
}
Enter this code in the "Custom CSS" part when you open your customizer.
Second - This code for removing some white space below your menu icon:
#mobile-menu-button {float: none;text-align: center;}
Replace this part in the responsive.min.css file.
Third - This code for removing some white space above your menu icon:
#mobile-menu-button {
margin: 1rem 0 0;
}
Replace this part in the foundation.css file.
As you will see, it works:
My page has a white space on the right side when using margins and padding in the mobile view.
My page:
https://www.blazor.nl/uploads/get/a83c2617117c88b0/IMG-0002
My CSS:
.page-wrapper .page-container {
margin: 0;
padding: 0;
position: relative; }
.page-wrapper .page-container .content-wrapper {
margin: 0 50px 0 50px;
min-height: 600px;
position: relative;
top: -120px; }
.page-wrapper .page-container .content-wrapper .maincontent {
padding: 30px; } }
#media only screen and (min-width: 768px) and (max-width: 992px) {
.page-wrapper .page-container .content-wrapper .maincontent {
padding: 20px; } }
.page-wrapper .page-container {
margin: 0;
padding: 0;
position: relative; }
.page-wrapper .page-container .content-wrapper > h2 {
color: #ffffff;
margin: 0 0 10px;
font-weight: 300; }
#media (max-width: 767px) {
.page-wrapper .page-container .content-wrapper > h2 {
color: #696969;
font-size: 24px; } }
#media (max-width: 992px) {
.page-wrapper .page-container .content-wrapper {
margin: 30px 30px 0 150px; } }
#media (max-width: 767px) {
.page-wrapper .page-container .content-wrapper {
margin: 15px; } }
I am using a snippet which can be found here: https://bootsnipp.com/snippets/dexRM. I also use Bootstrap 3.
Thanks
ERRORS
#media only screen (min-width: 1021px) and (max-width: 1180px) {
.twee img {
margin-top: 3em;
}
.drie {
margin-top: 3em;
}
.audiovisual iframe {
width: 90%;
}
.cp img {
width: 75%;
height: 75%;
display: inline;
padding: 0;
}
}
#media only screen (min-width: 791px) and (max-width: 1020px) {
body {
background-image: url(IMG/Sam-open-copy-1020.jpg);
}
.twee img {
margin-top: 7em;
}
.drie {
margin-top: 7em;
}
.zes {
margin-top: 2em;
}
.audiovisual iframe {
width: 90%;
}
.kaart iframe {
width: 75%;
height: 75%;
padding: 0;
margin: 0;
padding-bottom: 2em;
}
.cp img {
width: 75%;
height: 75%;
display: inline;
padding: 0;
}
#totop {
right: 0;
}
}
So this is my code, my mediaqueries won't apply on my HTML.
When I validate I got these errors.(see the image ERRORS) But I can't find out what's wrong with it? I checked everything but probably I can't find it because I look over it or something....
Add an extra 'and' in your #media query:
#media only screen and (min-width: 1021px) and (max-width: 1180px) { ...
please take a look at my sample code
HTML
<div class="custom-container">
<section class="parallax-bg-1 text-center" style="background-image:url('https://killtheboredomdotcom.files.wordpress.com/2015/08/skyline-of-rome.jpg?w=1920&h=768&crop=1')">
<h1 class="">Welcome</h1>
<p class="lead">subtitle</p>
</section>
</div>
CSS
.custom-container{
padding-right: 0;
padding-left: 0;
width: 100%,
}
section {
height:350px;
padding-top:50px;
padding-bottom:50px;
}
.parallax-bg-1 {
background: no-repeat top center fixed;
color:#fff;
background-size:cover;
}
containers
}
.custom-container{
padding-right: 0;
padding-left: 0;
width: 100%,
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
#media (min-width: 1600px) {
.container {
max-width: 1600px;
}
}
#media (min-width: 1900px) {
.container {
max-width: 1900px;
}
}
#media (min-width: 768px) {
.container {
width: 750px;
}
}
#media (min-width: 992px) {
.container {
width: 970px;
}
}
#media (min-width: 1200px) {
.container {
width: 1180px;
}
}
.container-fluid {
padding-right: 15px;
padding-left: 15px;
width: 100%;
margin-right: auto;
margin-left: auto;
}
JS Fiddle: https://jsfiddle.net/unpvuzaq/ (it works just fine in JS Fiddle but on my end it's not)
the picture is in parallax mode but take a look at my web screenshot it still has padding
image resolution 1920x1080
kindly help me.
add CSS outer div container,
.container.body-content{
width: 100%;
padding: 0;
margin: 0;
}
i think image may smaller than your screen size...you should give image as stretch...
add style to section class:
background-size: cover;
.custom-container{
padding-right: 0;
padding-left: 0;
width: 100%;
}
section {
height:350px;
padding-top:50px;
padding-bottom:50px;
}
.parallax-bg-1 {
background: no-repeat top center fixed;
color:#fff;
background-size:100%;
}
background-size: 100%; is working on 4K resolution display. (tested)