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)
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>
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>
Please can someone help me. I have created a website which uses background images. It was working fine a few hours ago but not there seems to be a problem with the way they resize.
If you go here http://culturesmartbooks.co.uk/regions/asia.php it is working fine.
However, on the page http://culturesmartbooks.co.uk/regions/australasia.php, when browser is above 1024px the background image disappears.
Here is the HTML for the Asia page:
<div class="asiaHero">
<div class="caption">
<h1>Asia</h1>
<img src="../images/logoBlue.png">
</div>
CSS:
.asiaHero {
background-image: url("../images/asiaHero.jpg");
height: 1000px;
background-position: top;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
.asiaHero .caption {
position: relative;
left: 0;
top: 40%;
width: 100%;
text-align: center;
color: white;
background: rgba(0,0,0,0.2);
height: auto;
padding: 0.5%;
}
.asiaHero .caption img {
width: 200px;
height: auto;
}
/* sm */
#media (min-width: 768px) {
.asiaHero .caption img {
width: 300px;
}
}
/* md */
#media (min-width: 992px) {
.asiaHero .caption img {
width: 400px;
}
}
/* lg */
#media (min-width: 1200px) {
.asiaHero .caption img {
width: 500px;
}
}
#media screen and (max-width: 1024px) {
.asiaHero {
background-attachment: scroll;
max-height: 650px;
background-position: top;
}
.asiaHero .caption {
top: 50%;
}
Australasia:
<div class="australasiaHero">
<div class="caption">
<h1>Australasia</h1>
<img src="../images/logoBlue.png">
</div>
CSS:
.australasiaHero {
background-image: url("../images/australasiaHero.jpg");
height: 1200px;
background-position: top;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
.australasiaHero .caption {
position: relative;
left: 0;
top: 40%;
width: 100%;
text-align: center;
color: white;
background: rgba(0,0,0,0.2);
height: auto;
padding: 0.5%;
}
.australasiaHero .caption img {
width: 200px;
height: auto;
}
/* sm */
#media (min-width: 768px) {
.australasiaHero .caption img {
width: 300px;
}
}
/* md */
#media (min-width: 992px) {
.australasiaHero .caption img {
width: 400px;
}
}
/* lg */
#media (min-width: 1200px) {
.australasiaHero .caption img {
width: 500px;
}
}
#media screen and (max-width: 1024px) {
.australasiaHero {
background-attachment: scroll;
max-height: 650px;
background-position: top;
}
.australasiaHero .caption {
top: 50%;
}
I cannot see why Asia would display and Australasia would not. Please can someone help
why did you write the css inside media? http://prntscr.com/f1ugsz
remove media and write the styles as default and it will work fine.
I've got a full page width image under the nav bar which will then have the title heading placed over it.
The thing is I cannot seem to figure out how to always have it dead centre no matter the size of the page. At the moment when the page is fully open, the title is in the middle, however upon resize the text goes down.
Any ideas?
<div class="row">
<div id="header-image">
<img src="images/header2.jpg" alt="header" class="img-responsive">
<div class="row">
<div class="col">
<h2 class="text-center">About Us</h2>
</div>
</div>
</div><!-- end header image -->
</div><!-- end row -->
#header-image{width: 100%; height: auto; margin-top: 50px; position: relative; min-height: 200px; }
#header-image h2{color: white; font-size: 5em; font-family: 'cmlight'; position: relative; padding-top: 10%; }
#header-image .col {position: absolute; z-index: 1; top: 0; left: 0; width: 100%; }
The use of Media Queries based on the screen size allows you to have different CSS depending on the resolution of the screen. The smaller you scroll the screen, it will then change it's CSS accordingly.
Media Query Tutorial : http://www.w3schools.com/css/css_rwd_mediaqueries.asp
The code below will change the font-size and the padding as the screen goes below the pixel requirements (500px and 200px). The padding was dropped to keep it under the image, and the font size was also lowered.
Solution 1
JS Fiddle : https://jsfiddle.net/Lq2zj48j/7/
#header-image {
width: 100%;
height: auto;
margin-top: 50px;
position: relative;
min-height: 200px;
}
#header-image h2 {
color: white;
font-size: 5em;
font-family: 'cmlight';
position: relative;
padding-top: 10%;
}
#header-image .col {
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
}
#media only screen and (max-width: 500px) {
#header-image h2 {
font-size: 4em;
padding-top: 5%;
}
}
#media only screen and (max-width: 200px) {
#header-image h2 {
font-size: 2em;
padding-top: 1%;
}
}
Solution 2
This solution has the chance of "squashing" the image. To avoid that, you could set the image in CSS (part of the background-image on your #header-image). From there you could set it to not repeat, centered and then use media queries to preserve the aspect ratio and "Zoom" in on the image on resize.
background-image: url('https://upload.wikimedia.org/wikipedia/commons/b/b5/Mt_Elbrus_Caucasus.jpg');
background-size: 1200px 652px; /* The dimentions of your image */
background-position: center;
background-repeat: no-repeat;
Js Fiddle : https://jsfiddle.net/Lq2zj48j/8/
#header-image {
width: 100%;
height: 400px;
margin-top: 50px;
position: relative;
background-image: url('https://upload.wikimedia.org/wikipedia/commons/b/b5/Mt_Elbrus_Caucasus.jpg');
background-size: 1200px 652px; /* The dimentions of your image */
background-position: center;
background-repeat: no-repeat;
}
#header-image h2 {
color: white;
font-size: 5em;
font-family: 'cmlight';
position: relative;
padding-top: 10%;
}
#header-image .col {
position: relative;;
width: 100%;
}
#media only screen and (max-width: 700px) {
#header-image h2 {
font-size: 4em;
padding-top: 5%;
}
#header-image {
height: 300px;
}
}
#media only screen and (max-width: 500px) {
#header-image h2 {
font-size: 4em;
padding-top: 5%;
}
#header-image {
height: 200px;
}
}
#media only screen and (max-width: 200px) {
#header-image h2 {
font-size: 2em;
padding-top: 1%;
}
#header-image {
height: 175px;
}
}
This is my first responsive site. I am happy with it however there is one very annoying aspect that has completely stumped me. The original site is www.elitemarquees.com.au I have changed the home page to:
http://elitemarquees.com.au/test/index.html
The issue is; when I make the browser smaller everything moves and behaves as I intended it except for the menu (#headNav) at one point. It jumps down into the main content (#content) and sits below the second line of body text. Then when you go smaller it rectifies its self and jumps back in between the logo (#headLogo) and the main body text. Here is how I have initially set up the div sections:
//this section contains two divs headLogo and headNav
#header {
height: 180px;
}
#headLogo {
width: 250px;
float: left;
}
#headNav {
width: 600px;
float: right;
margin-top: 70px;
padding-right: 40px
}
#content {
width: 500px;
float: right;
padding-right: 140px
}
The I do this which is where I believe the bad behaviour occurs:
/* for 700px or less */
#media screen and (max-width: 700px) {
#headNav {
width: auto;
float: none;
}
#headLogo {
width: auto;
float: none;
}
#content {
width: auto;
float: none;
}
#sidebar {
width: auto;
float: none;
}
}
It rectifies its self when this is fired:
/* for 480px or less */
#media screen and (max-width: 480px) {
#header {
height: auto;
}
#headNav {
padding-right: 0px;
margin-top: 0px;
}
h1 {
font-size: 24px;
}
#content {
padding-right: 10px
}
}
Thank you for any help
Here
/* for 700px or less */
#media screen and (max-width: 700px) {
#headNav {
width: auto;
float: none;
}
#headLogo {
width: auto;
float: none;
}
#content {
width: auto;
float: none;
}
#sidebar {
width: auto;
float: none;
}
}
You should add this :
#header{
height: auto;
}