I'm trying to change the header background color for mobile screens sizes only. The below isn't working.
I'd ideally not like to change the header or header_wrap code since this is working fine. For more context, if required, I made use of this fiddle: https://jsfiddle.net/eL1cabv9 but intentionally want the header transparent for screen sizes that are not mobile size.
Please assist. Thanks!
#media screen and (max-width: 480px) {
.ico {
width: 100px;
height: 100px;
}
.header {
background: #ffffff;
}
}
.ico {
height: 300px;
width: 300px;
position: fixed;
z-index: 999;
top: 30%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
margin-left: 15px;
margin-top: 16px;
}
header {
width: 100%;
height: 60px;
position: fixed;
top: -125px;
}
.header_wrap {
width: 100%;
height: 100%;
position: relative;
}
header {
background: transparent;
}
#media screen and (max-width: 480px) {
header {
background: #FFF;
}
}
Fiddle: https://jsfiddle.net/1p86ms30/
Your code is valid but css won't work that way. Only the last mentioned style will apply to the element. Let me explain it clearly.
.box{width: 100px; height:100px; background: red;}
.box{background: green;}
<div class="box">
</div>
As you can see from this sample snippet. The background color 'Green' is applied to the box element. The css simply ignored the first line where I mentioned the bg color.
The same applies here.
your code:
#media screen and (max-width: 480px) {
.ico {
width: 100px;
height: 100px;
}
.header {
background: green;
}
}
.body{margin: 0;}
.ico {
height: 300px;
width: 300px;
position: fixed;
z-index: 999;
top: 30%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
margin-left: 15px;
margin-top: 16px;
}
.header {
width: 100%;
height: 60px;
position: fixed;
background: red;
left: 0;
top: 0;
}
.header_wrap {
width: 100%;
height: 100%;
position: relative;
}
<html>
<head></head>
<body>
<header class="header">
<div class="header_wrap">
<div class="ico">
<span></span>
</div>
</div>
</header>
</body>
</html>
The Fix:
Always write media queries at the bottom of the stylesheet.
.body{margin: 0;}
.ico {
height: 300px;
width: 300px;
position: fixed;
z-index: 999;
top: 30%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
margin-left: 15px;
margin-top: 16px;
}
.header {
width: 100%;
height: 60px;
position: fixed;
background: red;
left: 0;
top: 0;
}
.header_wrap {
width: 100%;
height: 100%;
position: relative;
}
#media screen and (max-width: 480px) {
.ico {
width: 100px;
height: 100px;
}
.header {
background: green;
}
}
<html>
<head></head>
<body>
<header class="header">
<div class="header_wrap">
<div class="ico">
<span></span>
</div>
</div>
</header>
</body>
</html>
NOTE: Check the two snippets in responsive for better understanding.
Happy Coding!
Related
This question already has answers here:
Why can't an element with a z-index value cover its child?
(5 answers)
Closed last year.
I'm trying to add a kind of offset border to my img using z-index:-1. Using z-index:1 i get the border displayed on top and using z-index:-1 the border doesn't appear. I searched why could this happen and the most common answer was that positioning was missing and i have a position realtive in the div and position absolute on after. And i have position relative on my parent div and absolute in my after. I tried instead of using after making the outside border another div but doing this makes the image "dissapear".
Here is how the image looks with z-index:1
And how it looks with z-index:0
.styled-pic {
position: relative;
max-width: 300px;
}
.styled-pic::after {
position: absolute;
z-index: -1;
border: 2px solid;
border-color: rgb(114, 70, 184);
border-radius: 4px;
top: 40px;
left: 20px;
content: "";
display: block;
width: 300px;
height: 300px;
}
.about-image {
height: 300px;
width: 300px;
margin-top: 22px;
}
#media (max-width: 768px) {
.styled-pic {
display: block;
margin: auto;
width: 70%;
}
.about-image {
margin-top: 0;
}
}
#media (max-width: 425px) {
.about-image {
height: 262.5px;
width: 262.5px;
}
}
#media (max-width: 375px) {
.about-image {
height: 227.5px;
width: 227.5px;
}
}
#media (max-width: 320px) {
.about-image {
height: 189px;
width: 189px;
}
}
<div className="styled-pic">
<img
className="about-image"
src="https://www.lavanguardia.com/files/content_image_mobile_filter/uploads/2016/01/11/5fa2b91fa22c4.jpeg"></img>
</div>
Adding z-index:2 to the styled-pic class fixes it.
Final result:
.styled-pic {
position: relative;
max-width: 300px;
z-index: 2;
}
.styled-pic::after {
position: absolute;
z-index: -1;
border: 2px solid;
border-color: rgb(114, 70, 184);
border-radius: 4px;
top: 40px;
left: 20px;
content: "";
display: block;
width: 300px;
height: 300px;
}
I think you want to create something like this. Wait for a while I will upload the solution slowly.
code pen
https://codepen.io/ash_000001/pen/vYWdEjW?editors=1100
body {
background: pink;
padding: 30px;
}
.about-image{
height: 165px;
width: 275px;
}
div {
background: white;
height: 165px;
width: 275px;
position: relative;
}
div:after {
content: '';
background: transparent;
border: 1px solid white;
top: 7px;
right: 7px;
bottom: -7px;
left: -7px;
position: absolute;
z-index: -1;
}
<div><img
class="about-image"
src="https://www.lavanguardia.com/files/content_image_mobile_filter/uploads/2016/01/11/5fa2b91fa22c4.jpeg"></img></div>
See the modified code snippet below.
Added position: absolute; to the .about-image itself, so it preserves the context with the other absolute-positioned element (i.e. ::after pseudo element.)
.styled-pic {
position: relative;
max-width: 300px;
}
.styled-pic::after {
position: absolute;
z-index: 0;
border: 2px solid;
border-color: rgb(114, 70, 184);
border-radius: 4px;
top: 40px;
left: 20px;
content: "";
display: block;
width: 300px;
height: 300px;
}
.about-image {
position: absolute;
top: 0;
left: 0;
height: 300px;
width: 300px;
object-fit: cover;
margin-top: 22px;
z-index: 3;
}
<div class="styled-pic">
<img class="about-image" src="https://www.lavanguardia.com/files/content_image_mobile_filter/uploads/2016/01/11/5fa2b91fa22c4.jpeg" />
</div>
Try this below code
body {
font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.styled-pic {
position: relative;
max-width: 300px;
}
.styled-pic::after {
position: absolute;
z-index: 10;
border: 2px solid;
border-color: rgb(114, 70, 184);
border-radius: 4px;
top: 0;
left: -2px;
content: "";
display: block;
width: 300px;
height: 300px;
}
.about-image {
height: 300px;
width: 300px;
margin-top: 22px;
}
#media (max-width: 768px) {
.styled-pic {
display: block;
margin: auto;
width: 70%;
}
.about-image {
margin-top: 0;
}
}
#media (max-width: 425px) {
.about-image {
height: 262.5px;
width: 262.5px;
}
}
#media (max-width: 375px) {
.about-image {
height: 227.5px;
width: 227.5px;
}
}
#media (max-width: 320px) {
.about-image {
height: 189px;
width: 189px;
}
}
<div class="styled-pic">
<img
class="about-image"
src="https://www.lavanguardia.com/files/content_image_mobile_filter/uploads/2016/01/11/5fa2b91fa22c4.jpeg"></img>
</div>
The button will not stay with the image when I adjust the size of the browser. I tried the position:absolutein the img div and the responsive didn't work well with the position property. Obviously the float:left doesn't work either as written in CSS.
.section6 {
margin: 0 auto;
text-align: center;
margin-top: 0;
}
.img-group img {
z-index: 2;
text-align: center;
margin: 0 auto;
border: 1px solid red;
}
div.bg-bar {
margin-top: -150px;
max-height: auto;
height: 150px;
background-color: #7290ab;
z-index: 3;
}
.section6 button {
float: left;
position: relative;
z-index: 1;
margin-top: 200px;
margin-left: 330px;
top: 40px;
}
<section class="section6">
<button>REQUEST AN INTERPRETER</button>
<div class="img-group"><img src="http://dignityworks.com/wp-content/uploads/2016/04/group-people-standing-copyspace-7235283.jpg" alt="World-class SVRS interpreters"></div>
<div class="bg-bar"></div>
</section>
See on JSFIDDLE of what I did.
You're using fixed sizing units and this is not how you make responsive pages.
If you want the button to stay in the middle, you have to position it absolutely inside the relative div.
Something like this:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.relative {
position: relative;
padding: 10px;
background: #0fc0fc;
animation: reduce 2s ease-in-out infinite;
height: 50px;
}
button.centered {
position: absolute;
left: 50%;
/* Kind of makes the anchor point of the element to be in the horizontal center */
transform: translateX(-50%);
}
#keyframes reduce {
0%,
100% {
width: 100%;
}
50% {
width: 50%;
}
}
<div class="relative">
<button class="centered">I'm in the middle</button>
</div>
You are better off changing the image to be a background image on that div and moving the button to be inside of it.
HTML:
<section class="section6">
<div class="img-group"><button>REQUEST AN INTERPRETER</button></div>
<div class="bg-bar"></div>
</section>
CSS:
.section6 {
margin: 0 auto;
text-align: center;
margin-top: 0;
}
.img-group {
z-index: 2;
text-align: right;
margin: 0 auto;
border: 1px solid red;
position: relative;
background: url('http://dignityworks.com/wp-content/uploads/2016/04/group-people-standing-copyspace-7235283.jpg') no-repeat;
background-size: cover;
width: 400px;
height: 370px;
}
div.bg-bar {
margin-top: -150px;
max-height: auto;
height: 150px;
background-color: #7290ab;
z-index: 3;
}
.section6 button {
position: relative;
z-index: 5;
top: 100px;
margin-right: 20px;
}
Try this:
HTML:
<section class="section6">
<div class="img-group">
<img src="http://dignityworks.com/wp-content/uploads/2016/04/group-people-standing-copyspace-7235283.jpg" alt="World-class SVRS interpreters">
<button>REQUEST AN INTERPRETER</button>
</div>
<div class="bg-bar"></div>
</section>
CSS:
.section6 {
margin: 0 auto;
text-align: center;
margin-top: 0;
}
.img-group {
position: relative;
}
.img-group img {
text-align: center;
max-width: 100%;
margin: 0 auto;
border: 1px solid red;
}
.img-group button {
display: block;
position: absolute;
z-index: 10;
margin-left: -75px;
top: 50%;
left: 50%;
max-width: 100%;
}
div.bg-bar {
margin-top: -150px;
max-height: auto;
height: 150px;
background-color: #7290ab;
}
I am trying to figure out how to place the logo in the middle of the two sections of my landing page but only on the mobile view. The text class is for my logo. I cant seem to figure out the best way to do so.
.text {
position: absolute;
right: 70px;
left: 70px;
text-align: center;
z-index: 10;
margin: auto;
max-width: 600px;
}
Here is the codepen: http://codepen.io/anon/pen/xqQPVN?editors=1100
Just give it position:absolute and set it accordingly for mobile devies..
Added the following css in the case of mobile.
/* Logo In Center For Mobile Device*/
.logo-big {
display: block;
width: 100%;
position: absolute;
top: 500px;
margin-top: -75px;
}
Codepen link-http://codepen.io/sahildhir_1/pen/wJQxQy?editors=1100
Below is the snippet-
* {
box-sizing: border-box;
}
html,
body {
height: 100%
}
img {
max-width: 100%;
}
.item {
width: 50%;
float: left;
top: 0;
left: 0;
height: 100%;
z-index: 0;
overflow: hidden;
background-color: #000000;
background-position: center center;
background-size: auto 100%;
position: relative;
}
.overlay {
width: 100%;
height: 100%;
position: absolute;
background-color: rgba(0, 0, 0, 0.3);
transition: .2s linear;
}
.nurseryarea {
width: 100%;
position: absolute;
text-align: center;
top: 45%;
color: #fff;
font-size: 30px;
font-family: 'times new roman';
font-weight: bold;
transition: .2s linear;
}
::selection {
color: #ebebe3;
background: #222;
}
::-moz-selection {
color: #ebebe3;
background: #222;
}
.overlay:hover {
background-color: rgba(0, 0, 0, 0.1);
transition-property: background-color;
}
.overlay:hover .nurseryarea {
opacity: 1;
transition-property: opacity;
}
.logo-big {
display: block;
width: 100%;
}
.logo-big .svg {
display: block;
width: 100%;
height: auto;
}
.imgsize {
width: 40%;
}
.text {
position: absolute;
right: 70px;
left: 70px;
text-align: center;
z-index: 10;
margin: auto;
max-width: 600px;
}
#media screen and (max-width:600px) {
.nurseryarea {
width: 100%;
}
.imgsize {
width: 60%;
}
.text {
position: absolute;
right: 70px;
left: 70px;
text-align: center;
z-index: 10;
margin: auto;
max-width: 600px;
}
/* Logo In Center For Mobile Device*/
.logo-big {
display: block;
width: 100%;
position: absolute;
top: 500px;
margin-top: -75px;
}
.logo-big .svg {
display: block;
width: 100%;
height: auto;
}
.item {
width: 100%;
float: left;
top: 0;
left: 0;
height: 500px;
z-index: 0;
overflow: hidden;
background-color: #000000;
background-position: center center;
background-size: auto 100%;
}
}
<div class="text">
<a class="logo logo-big" href="http://www.lygonstnursery.com">
<img class="svg " src="https://www.lygonstnursery.com/wp-content/uploads/2017/03/NURSERY-landing-page.png" alt="Lygon Street Nursery">
</a>
</div>
<div class="item" style="background-image: url(https://www.lygonstnursery.com/wp-content/uploads/2017/02/LygonStNursery_Nursery-29.jpg);background-size:cover;">
<div class="overlay">
<div class="nurseryarea">
<img class='imgsize' src="https://www.lygonstnursery.com/wp-content/uploads/2017/03/nursery.png" ;>
</div>
</div>
</div>
<div class="item" style="background-image: url(https://www.lygonstnursery.com/wp-content/uploads/2017/02/LygonStNursery_Brunswick-24.jpg); background-size:cover;">
<div class="overlay">
<div class="nurseryarea">
<img class="imgsize" src="https://www.lygonstnursery.com/wp-content/uploads/2017/03/landscapes.png" ;>
</div>
</div>
</div>
If you want to have total control over the positioning i'd say go for progressively specific media queries (say: 425px, 375px, 320px) and use pixel positioning.
If you want to keep it generic, you must be prepared to have some small differences between these sizes, but you can use percentages and the result isn't so bad.
#media (max-width: 425px) {
.text {
position: absolute;
right: 34%;
left: 32%;
top: 34%;
}
}
Trying to make my portfolio, and new to webdesign. I am trying to add navigation links but the last link goes to next line. Don't know why is it so?
I want in single line, and if even there is some different method to represent this pl. help me/guide me for that too.
Thank You!
My Demo
CSS & HTML
html,
body {
margin: 0%;
top: 0%;
}
body {
background: #2f233d;
overflow: hidden;
}
header {
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 12%;
background: #333;
font-family: Agenda Medium, Sans-Serif, Arial;
font-size: 20px;
}
header img {
display: inline;
width: 227px;
height: 100px;
margin-left: 2%;
}
header .links {
display: inline-block;
position: absolute;
bottom: 10%;
}
header a {
border: 1px solid #ddd;
padding: 1%;
text-decoration: none;
color: #ccc;
}
footer {
position: fixed;
bottom: 0%;
left: 0%;
width: 100%;
height: 10%;
background: #ccc;
}
aside {
position: fixed;
top: 12%;
left: 0%;
width: 20%;
height: 78%;
background: #f2f1f1;
overflow-y: auto;
}
section {
position: fixed;
top: 12%;
left: 20%;
width: 82%;
height: 78%;
background: #fff;
overflow-y: scroll;
}
<header>
<img src="Logo.png" alt="logo" />
<span class="links">
Home
About
Gallery
Work
Contact
</span>
</header>
<footer></footer>
<aside></aside>
<section></section>
You need to define your widths. Currently width is dependent on the length of the word.
Here is one of many solutions, this one being very straightforward.
header img {
width: 15%;
}
.links {
width: 80%;
}
I shaved a bit off to account for margins and paddings. The important thing here is I'm defining the image's width in percent instead of pixels, and I'm defining the width of .links, and not just the children of it.
In honesty, your solution is going to need to be more complex. It needs to account for mobile devices, because a small screen will cause the words to overflow their border. This, however, should answer your immediate question.
fiddle
For header a and header .links to changes in CSS..
demo:
html,
body {
margin: 0%;
top: 0%;
}
body {
background: #2f233d;
overflow: hidden;
}
header {
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 12%;
background: #333;
font-family: Agenda Medium, Sans-Serif, Arial;
font-size: 20px;
}
header img {
display: inline;
width: 227px;
height: 100px;
margin-left: 2%;
}
header .links {
display: inline-block;
position: absolute;
bottom: 10%;
width:100%
}
header a {
border: 1px solid #ddd;
padding: 1%;
text-decoration: none;
color: #ccc;
display:inline-block
}
footer {
position: fixed;
bottom: 0%;
left: 0%;
width: 100%;
height: 10%;
background: #ccc;
}
aside {
position: fixed;
top: 12%;
left: 0%;
width: 20%;
height: 78%;
background: #f2f1f1;
overflow-y: auto;
}
section {
position: fixed;
top: 12%;
left: 20%;
width: 82%;
height: 78%;
background: #fff;
overflow-y: scroll;
}
<header>
<img src="Logo.png" alt="logo" />
<span class="links">
Home
About
Gallery
Work
Contact
</span>
</header>
<footer></footer>
<aside></aside>
<section></section>
Just replace your header .links class
header .links
{
display:inline-block;
position:absolute;
bottom:10%;
width:100%
}
It will work for you.
I have a page which is structured into two main divs. One's a header which sits at the top of the page and there is one below it which is a container for the page content. The header can be seen in the code snippet below:
<link href="http://www.spareskills.com/css/compiled/theme.css" rel="stylesheet"/>
<body id="postajob">
<div class="header">
<div class="background-images img1 animated fadeInUpBig"></div>
<div class="container">
<div class="row">
<div class="col-md-12">
<h2 class="animated bounceInLeft">Post a job.</h2>
<p>
Find a job by filling out your application below. It really is easy.
<br>
<span class="hidden-xs">Explain the job you need and people with the right skills will be in touch</span>
</p>
</div>
</div>
</div>
</div>
</body>
The relevant SASS/CSS is listed below:
#postajob {
-webkit-font-smoothing: antialiased;
.header {
background: $postajob_header_bg_color;
border-bottom: 1px solid $postajob_header_border_color;
height: auto;
padding-bottom: 20px;
h2 {
margin-top: 110px;
color: $postajob_header_text_color;
font-weight: 400;
font-size: 34px;
z-index: 100;
text-align: center;
#include max-sm {
margin-top: 95px;
font-size: 28px;
}
}
p {
font-weight: 300;
font-size: 17px;
color: $postajob_header_subtext_color;
z-index: 100;
text-align: center;
#include max-sm {
font-size: 14px;
}
}
.background-images {
width: 100%;
height: 50%;
&.img1 {
position: absolute;
background-repeat: no-repeat;
background-image: url('../../images/flat-icons/svg/paper-airplane.svg');
z-index: 3;
#include min-md {
background-size: 150px 150px;
top: 150px;
left: 80%;
}
#include max-md {
background-size: 100px 100px;
top: 180px;
left: 85%;
}
#include max-sm {
background-size: 40px 40px;
top: 180px;
left: 45%;
}
#include max-xs {
background-size: 40px 40px;
top: 180px;
left: 45%;
}
}
}
}
}
You can see by resizing the snippet how the image behaves relative to the header. However this is all from hard coding pixels into the stylesheet as you can see.
My question is: How can I get the image to stick the bottom of the header as in the first snippet (when it is full size) no matter what the resolution or the device?
It doesn't need background images or the grid system. The Bootstrap docs correctly state that is something is always full width, then you don't need the grid system.
DEMO: https://jsbin.com/gomoca/1/
https://jsbin.com/gomoca/1/edit?html,css,output
HTML:
<section class="primary-page-header text-center">
<div class="container">
<h1>Title</h1>
<p>Text Goes Here</p>
<div class="page-header-img center-block">
<img src="http://placekitten.com/g/150" class="img-responsive img-circle" alt="" />
</div>
</div><!-- /.container -->
</section><!-- /.primary-page-header>
CSS:
.primary-page-header {
background: #f7f7f7;
border-bottom: 4px double #aaa;
padding-top: 5%;
}
.primary-page-header p {
padding-bottom: 2%;
}
.primary-page-header h1 {
font-size:24px;
}
.page-header-img img {
border:1px solid #aaa;
padding:3px;
background:#fff;
}
.page-header-img {
width: 50px;
height: 50px;
margin-bottom: -25px;
}
#media (min-width:600px) {
.page-header-img {
width: 100px;
height: 100px;
margin-bottom: -50px;
}
}
#media (min-width:768px) {
.page-header-img {
width: 150px;
height: 150px;
margin-bottom: -75px;
}
.primary-page-header h1 {
font-size:55px;
}
}
Looks like you have set left: 85% for the max size. It should stay on bottom if you set it to 45% just like the other sizes
#postajob {
-webkit-font-smoothing: antialiased;
.header {
background: $postajob_header_bg_color;
border-bottom: 1px solid $postajob_header_border_color;
height: auto;
padding-bottom: 20px;
h2 {
margin-top: 110px;
color: $postajob_header_text_color;
font-weight: 400;
font-size: 34px;
z-index: 100;
text-align: center;
#include max-sm {
margin-top: 95px;
font-size: 28px;
}
}
p {
font-weight: 300;
font-size: 17px;
color: $postajob_header_subtext_color;
z-index: 100;
text-align: center;
#include max-sm {
font-size: 14px;
}
}
.background-images {
width: 100%;
height: 50%;
&.img1 {
position: absolute;
background-repeat: no-repeat;
background-image: url('../../images/flat-icons/svg/paper-airplane.svg');
z-index: 3;
#include min-md {
background-size: 150px 150px;
top: 150px;
left: 80%; ----> Change this to 45%
}
#include max-md {
background-size: 100px 100px;
top: 180px;
left: 85%; ----> Change this to 45%
}
#include max-sm {
background-size: 40px 40px;
top: 180px;
left: 45%;
}
#include max-xs {
background-size: 40px 40px;
top: 180px;
left: 45%;
}
}
}
}
}
I haven't tested this across browsers, but here's a solution using background image and a "padding height" trick. The #media queries are used to control which image is displayed at your desired breakpoints, to allow you specify higher-resolution images as the background image gets bigger.
For centering along the container's width, we use the position/transform trick (absolutely position the element, set left:50%, then translate the element -50% of its own width.
header {
padding: 2rem;
text-align: center;
position: relative;
}
header::after {
content: ' ';
border: 1px solid #009;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -2;
}
header::before {
content: ' ';
position: absolute;
top: 100%;
left: 50%;
z-index: -1;
transform: translate(-50%, -50%);
background-size: 100%;
background-repeat: no-repeat;
width: 10%;
height: 0;
padding-bottom: 10%;
}
#media screen and (max-width: 768px) {
header::before {
background-image: url(http://placehold.it/80x80);
}
}
#media screen and (min-width: 769px) {
header::before {
background-image: url(http://placehold.it/100x100);
}
}
<header>
This is a header with some content.
</header>