here is my code:
.showcase {
width: 100%;
height: 93vh;
position: relative;
background-image: url("https://i.ibb.co/vXqDmnh/background.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
&::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background: rgba(0, 0, 0, 0.6);
box-shadow: inset 120px 100px 250px black, inset -120px -100px 250px black;
}
}
#media only screen and (max-width: 960px) {
.showcase {
height: 70vh;
}
.hide-sm {
display: none;
}
.showcase-top img {
top: 30%;
left: 5%;
transform: translate(0);
}
.showcase-content {
h1 {
font-size: 3.5rem;
line-height: 1;
}
}
}
Here only (.hide-sm) class is working but other classes are not working. I tried to see using chrome dev tools but it shows that the original styling is not changed. Can anyone help me to figure out this problem?
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>
I can't figure out why a margin is not respected when I resize to mobile view. If you resize the window, left margin is respected, however, right margin is not respected.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.banner-container {
position: relative;
}
.banner-image {
height: 200px;
width: 100%;
background-color: rebeccapurple;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.banner-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 560px;
width: 100%;
background-color: rgba(255, 255, 255, 0.5);
text-align: center;
font-size: 32px;
padding: 24px 0;
margin: 0 10px;
}
#media screen and (max-width: 768px) {
.banner-text {
font-size: 24px;
}
}
<div class="banner-container">
<div class="banner-image"></div>
<span class="banner-text">Candidate Membership</span>
</div>
I'd appreciate if someone could explain what I'm doing wrong. Thanks.
The margin is there, but it is added to the 100% width you defined. So the element's width including margins goes beyond the container width.
.banner-text in media width : 80%
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.banner-container {
position: relative;
}
.banner-image {
height: 200px;
width: 100%;
background-color: rebeccapurple;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.banner-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 560px;
width: 100%;
background-color: rgba(255, 255, 255, 0.5);
text-align: center;
font-size: 32px;
padding: 24px 0;
margin: 0 10px;
}
#media screen and (max-width: 768px) {
.banner-text {
font-size: 24px;
}
.banner-text{
width: 80%;
}
}
<div class="banner-container">
<div class="banner-image"></div>
<span class="banner-text">Candidate Membership</span>
</div>
So I have a simple little project I'm making, which has a gradient background. However, upon loading up the website, it looks like this:
image
And, as you can see, it doesn't extend to the bottom of the screen. What is the cause of this? Here is my stylesheet:
* {
box-sizing: border-box;
}
.bg-image {
background-image: url('../bg/bg.png');
background-size: cover;
-webkit-background-size: cover;
display: block;
filter: blur(5px);
-webkit-filter: blur(5px);
height: 800px;
left: 0;
position: fixed;
right: 0;
z-index: -1;
}
.container p {
margin: 1%;
font-weight: bold;
color: #000000;
opacity: 1;
}
.container {
background: rgba(255, 255, 255, 0.35);
border-radius: 3px;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
top: 175px;
left: 0;
position: fixed;
margin-left: 200px;
margin-right: 200px;
right: 0;
padding: 0 10px;
text-align: center;
}
.container ul {
margin: 5%;
font-weight: bold;
color: #000000;
opacity: 1;
}
.container img {
max-width: 600x;
max-height: 400px;
}
.logo img {
margin: 0 auto;
display: block;
max-width: 500px;
max-height: 150px;
}
Thanks for any help.
On my site, www.azletconsulting.com, when the site drops below 950px safari breaks the positioning of the Register to Vote, Join the Campaign etc menu positioning. At the larger sizes everything is aligned properly but as soon as it drops to one of the smaller css media queries the menu buttons break alignment. The code is the same between all the media queries and I have no issue in Chrome/Firefox.
.main_footer_menu {
left: 0;
bottom: 0;
top: 319px;
position: absolute;
width: 100%;
height: 80px;
background-color: rgba(93, 93, 93, 1);
z-index: 10;
box-sizing: border-box;
}
ul#menu-bottom-menu {
margin: 0;
padding: 0;
height: 80px;
}
li#menu-item-28 a {
left: -200px;
position: relative;
display: inline-block;
width: 200px;
height: 80.5px;
background-image: url("images/buttons/medium/rov.png");
background-size: 200px 80.5px;
background-repeat: no-repeat;
background-position: center;
text-indent: -99999999px;
overflow: hidden;
}
li#menu-item-29 a {
top: -90px;
position: relative;
display: inline-block;
width: 200px;
height: 80.5px;
background-image: url("images/buttons/medium/join.png");
background-size: 200px 80.5px;
background-repeat: no-repeat;
background-position: center;
text-indent: -99999999px;
overflow: hidden;
}
li#menu-item-30 a {
top: -175px;
left: 200px;
position: relative;
display: inline-block;
width: 200px;
height: 80.5px;
background-image: url("images/buttons/medium/contribute.png");
background-size: 200px 80.5px;
background-repeat: no-repeat;
background-position: center;
text-indent: -99999999px;
overflow: hidden
}
Try this:
.main_footer_menu {
left: 0;
bottom: 0;
top: 319px;
position: absolute;
width: 100%;
height: 80px;
background-color: rgba(93, 93, 93, 1);
z-index: 10;
box-sizing: border-box;
}
ul#menu-bottom-menu {
margin: 0;
padding: 0;
height: 80px;
}
li#menu-item-28, li#menu-item-29, li#menu-item-30 {
display: inline-block;
}
li#menu-item-28 a, li#menu-item-29 a, li#menu-item-30 a {
display: inline-block;
width: 200px;
height: 80.5px;
background-size: 200px 80.5px;
background-repeat: no-repeat;
background-position: center;
text-indent: -99999999px;
overflow: hidden;
}
li#menu-item-28 a {
background-image: url("images/buttons/medium/rov.png");
}
li#menu-item-29 a {
background-image: url("images/buttons/medium/join.png");
}
li#menu-item-30 a {
background-image: url("images/buttons/medium/contribute.png");
}
Whats going on with my site at minimized widths and how can I fix it?
Problem
It looks good on a mobile phone and full screen, but when sizing down, my background image disappears and the top bar seems to be acting weird (with the logo doing crazy stuff) at around 600ish pixels.
My #media query code:
#media only screen and (min-width:1024px)
{
div.large-7.push-5.columns.last{
height: emCalc(1px);
}
}
#media only screen and (max-width: 1023px) and (min-width:675 px){ //745 //481
.top-bar .toggle-topbar.menu-icon a {
color: $steel;
height: 34px;
line-height: 33px;
padding: 0 25px 0 0;
position: relative;
}
.container{
/*background: linear-gradient(to bottom, yellow, magenta);*/
height: 66rem; /*645px*/
//overflow: hidden;
background-image: url('/img/losang.jpg');
background-size: 100%;
background-repeat: no-repeat;
}
.top-bar{
// overflow: hidden;
}
.top-bar .toggle-topbar.menu-icon a:after {
box-shadow: 0 10px 0 1px $steel, 0 16px 0 1px $steel, 0 22px 0 1px $steel;
content: "";
display: block;
height: 0;
position: absolute;
right: 5px;
top: 0;
width: 16px;
}
}
#media only screen and (max-width: 674px) { //480
// .title-area {
// max-width: 40%; //or whatever you need for your layout. px will work there, too
// }
// .title-area .logo {
// width: 100%;
// height: auto;
// }
#icons .hover1 {
.iconlinks {
color:$iconcolor1;
}
}
#icons .hover2 {
.iconlinks {
color:$iconcolor2;
}
}
#icons .hover3 {
.iconlinks {
color:$iconcolor3;
}
}
.path-container .path-item .circle.circle-right {
right: 90px;
}
.path-container {
text-align: center;
}
.path-container .circle {
top: 0;
// right: 0;
// left: 0;
float: none;
margin-bottom: 30px !important;
margin-top: 60px;
margin-left: auto;
margin-right: auto;
}
.top-bar .toggle-topbar.menu-icon a {
color: $steel;
height: 34px;
line-height: 33px;
padding: 0 25px 0 0;
position: relative;
}
.top-bar .toggle-topbar.menu-icon a:after {
box-shadow: 0 10px 0 1px $steel, 0 16px 0 1px $steel, 0 22px 0 1px $steel;
content: "";
display: block;
height: 0;
position: absolute;
right: 5px;
top: 0;
width: 16px;
}
.top-bar {
overflow: hidden;
}
.orbit-container{
height: 12.5rem;
}
.container{
/*background: linear-gradient(to bottom, yellow, magenta);*/
height: 66rem; /*645px*/
overflow: hidden;
background-image: url('/img/losang.jpg');
background-size: 100%;
background-repeat: no-repeat;
/*background-color: #ccc;
.container{
/*background: linear-gradient(to bottom, yellow, magenta);*/
//height: 65rem; /*645px*/
// background-color: blue;
}
.servicesminicontainer{
margin-top:emCalc(0px);
}
.serviceimgs{
margin: emCalc(0px) auto;
}
.servicescontainer{
/*background: linear-gradient(to bottom, yellow, magenta);*/
// height:40rem; /*645px*/
overflow: hidden;
background: none;
/*background-image: url('../img/laback.jpg');*/
background-size: 100%;
//background-repeat: no-repeat;
// background-color: rgba(30,144,255, .7)
//background: linear-gradient(to bottom, $background-color-top, white);
//background-image: url('../img/losang.jpg');
}
#icons{
position: relative;
top: initial;
margin-top: 50px
}
.logo{
width: 50%;
// position:relative;
// top:emCalc(-27px);
}
#topbutton{
position: relative;
top: 2rem;
}
#icons{
/*position: relative;
top:6rem;*/
}
.container1 p, h4{
color:black;
}
header{
margin-top: 0rem;
background-image: none;
}
}
I am not sure try with the following styles. Hope it will fix the top header issues.
#media only screen and(min-width:500px) and (max-width: 600px)
{
.top-bar .name
{
height:auto;
}
.top-bar
{
height:5rem;
}
}