How to Prevent my Images from overflowing in CSS? - css

Here is the codepen showing what is happening https://codepen.io/designextras/pen/abdMwrP
I tried to add overflow: hidden and overflow-x, y but it still didn't work.
I'm using before and after cause I have two svgs that I need displayed on the right side
.container {
max-width: 100%;
}
.container:before {
content: '';
display: block;
position: absolute;
background: url(images/svg-gradient.svg) no-repeat;
width: 100%;
height: 100%;
max-width: 855px;
top: 0%;
right: -5%;
}
.container:after {
content: '';
display: block;
position: absolute;
background: url(images/dashboard-svg.svg) no-repeat;
width: 100%;
height: 100%;
max-width: 855px;
top: 30%;
right: -10%;
transform: rotate(-20deg);
}


You add this in css AND disable x srolling,
body {
overflow-x: hidden
}
Add this to .container:before and .container:after
z-index: -1;
And the complete working thing,
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
}
body {
overflow-x: hidden;
}
nav {
width: 100%;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.container {
max-width: 100%;
max-height: 100vh;
background: yellow;
}
.container:before {
content: '';
z-index: -1;
display: block;
position: absolute;
background: blue;
width: 100%;
height: 100%;
max-width: 855px;
top: 0%;
right: -5%;
}
.container:after {
content: '';
z-index: -1;
display: block;
position: absolute;
background: red;
width: 100%;
height: 100%;
max-width: 855px;
top: 30%;
right: -10%;
transform: rotate(-20deg);
}
.navbar-menu {
display: flex;
justify-content: space-between;
align-items: center;
width: 80%;
height: 80px;
}
#logo {
font-size: 2rem;
font-weight: bold;
text-decoration: none;
color: #2C2C2C;
}
ul {
display: flex;
}
li {
list-style: none;
margin-right: 2rem;
}
a {
text-decoration: none;
color: #000;
}
#btn {
background: #50CDFB;
height: 146px;
width: 130px;
padding: 10px 16px;
border-radius: 4px;
color: #fff;
}
.new-section {
background: red;
height: 500px;
width: 500px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<nav>
<div class="navbar-menu">
Startup
<ul>
<li>Home</li>
<li>Services</li>
<li>Pricing</li>
<li>Contact</li>
<li><a href="#" id='btn'>Signup</a></li>
</ul>
</div>
</nav>
<div>New section</div>
</div>
<div>I need to be under everything</div>
</body>
</html>

Related

change color of menu depending on background

I'm using mix-blend-mode to change the color of my hamburger menu but it isn't working. The menu stays the some color regardless of what the background is. Here's the CSS and HTML
:root {
--black-color: #3F3D3C;
--white-color: #FAF9F6;
--taupe-color: #D8C7B8;
--grey-color: #CCC5C2;
}
.menu {
position: fixed;
top: 0;
right: 0;
z-index: 1;
aspect-ratio: 1 / 1;
width: 5%;
max-width: 25px;
margin-right: 1rem;
margin-top: 1rem;
}
.menu .toggler {
position: absolute;
margin: auto;
z-index: 2;
cursor: pointer;
width: 100%;
height: 100%;
opacity: 0;
}
.menu .icon {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
z-index: 1;
aspect-ratio: 1 / 1;
width: 100%;
background: transparent;
}
.menu .icon>div {
position: relative;
width: 100%;
height: 0.5px;
background: var(--black-color);
mix-blend-mode: difference;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.5s ease;
}
.menu .icon>div:before {
content: '';
position: absolute;
top: -4px;
width: 100%;
height: 0.5px;
z-index: 1;
background: inherit;
mix-blend-mode: difference;
}
.menu .icon>div:after {
content: '';
position: absolute;
top: 4px;
width: 100%;
height: 0.5px;
z-index: 1;
background: inherit;
mix-blend-mode: difference;
}
.black {
background-color: var(--black-color);
height: 100vh;
width: 100vw;
}
.grey {
background-color: var(--grey-color);
height: 100vh;
width: 100vw;
}
.white {
background-color: var(--white-color);
height: 100vh;
width: 100vw;
}
<div class="menu">
<input type="checkbox" class="toggler" onclick="document.getElementById('overlay').style.opacity='1'">
<div class="icon">
<div></div>
</div>
<div class="overlayHidden" id="overlay">
<nav>
<div id="nav-links"></div>
</nav>
</div>
</div>
<div class="white">content with different background color</div>
<div class="black">content with different background color</div>
<div class="grey">content with different background color</div>
where am I going wrong?
EDIT:
updated the code so you can run snippet

Problems with responsive in iPhone

I'm trying to make my own website but I'm having a LOT of glitches with responsive on iphone
Look these screens:
I have and intro of my web and a menu
This works perfectly in all Windows browsers and also in Android. Which does not happen on Safari or all browsers from iphone:
The text does not appear, and the menu does not even open completely
my css:
//Navbar:
.at-front-no-feature.menu-default .navbar{
position: fixed;
}
.menu-default .navbar{
position: static;
z-index: 9;
left: 0;
right: 0;
}
CSS when i click on button:
.menu-default #navbar .navbar-collapse {
height: auto;
min-height: 100%;
position: fixed;
max-height: 70vh;
right: 0;
left: 0;
z-index: 999;
}
CSS Of links:
float: none;
list-style: none;
margin: 0;
padding-left: 0;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
text-align: center;
}
CSS of my text center (Hi my name is peter)
.home-content{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width:100%;
text-align:center;
display:flex;
flex-wrap:wrap;
justify-content:center;
}
.home-content h1{
display:block;
width:100%;
color: #202020;
text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.6);
}
.home-content a{
width:200px;
height: 50px;
border:1px solid black;
background:#666!important;
margin-left:40px;
line-height:50px;
text-decoration:none!important;
color:#f2f2f2!important;
border-radius:10px;
transform:300ms all;
}
How can i fix this? I have tried with display: inline-block; and vertical-align:middle; and it does show me the text on iphone but it won't let me resize the buttons ... or apply width or height.
Edit: I have been doing tests and it seems that the image dulls the menu and therefore is not visible. Despite using fixed or absolute position it is not seen. As much as I use the z-index it doesn't work ... How can I fix it?

See this:
$(document).ready(function () {
$('.menu-btn').click(function(event) {
$('.navbar-demo').toggleClass('open-nav');
});
});
body {
margin: 0;
font-family: Roboto;
}
.hero-image .about-me {
width: 100%;
position: absolute;
top: 50%;
left: 50%;
right: 0;
transform: translate(-50%, -50%);
text-align: center;
z-index: 99;
}
.hero-image .about-me label {
font-size: 26px;
color: #fff;
display: block;
}
.hero-image:after {
background-color: black;
content: '';
position: absolute;
width: 100%;
left: 0;
right: 0;
height: 100%;
opacity: 0.3;
}
.hero-image {
background-size: cover;
position: relative;
width: 100%;
height: 100vh;
background-color: lightgray;
background-image: url('https://images.unsplash.com/photo-1495465798138-718f86d1a4bc?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1350&q=80');
display: table;
background-position: center;
}
.hero-image .about-me a {
display: inline-block;
text-decoration: none;
color: #fff;
padding: 10px 20px;
border: 1px solid white;
margin: 20px;
}
.navbar-demo {
display: table;
width: 100%;
position: fixed;
z-index: 99;
}
.navbar-demo .nav-bar ul li {
display: block;
}
.navbar-demo .nav-bar ul {
padding: 0;
display: table;
text-align: center;
display:flex;
flex-wrap:wrap;
justify-content:center;
align-items: center;
margin: 0;
padding: 0;
}
.navbar-demo .nav-bar ul li a {
font-size: 18px;
display: inline-block;
text-align: center;
text-decoration: none;
color: #000;
padding: 18px;
text-transform: uppercase;
}
.nav-bar {
text-align: center;
display:flex;
flex-wrap:wrap;
justify-content:center;
align-items: center;
position: relative;
}
.navbar-demo button.menu-btn {
display:none;
}
#media only screen and (max-width: 767px){
.navbar-demo button.menu-btn {
position: absolute;
top: 0;
right: 0;
background-color: unset;
border: 0;
font-size: 26px;
display:block;
padding: 23px;
color: #fff;
outline: none;
}
.navbar-demo{
height:100%;
z-index: 999;
}
.navbar-demo .nav-bar {
left: -950px;
background-color: #000000d9;
transition: 1s;
height: 100%;
}
.navbar-demo.open-nav .nav-bar{
left: 0;
width: 100%;
transition: left 0.5s;
height: 100%;
}
.navbar-demo .nav-bar ul li a {
display: block;
color: #fff;
}
.navbar-demo.open-nav button.menu-btn i:before {
content: '\f00d ';
}
}
<!-- Meta View Port -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<!-- Jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- FontAwesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<header id="header" class="navbar-demo">
<div class="nav-bar">
<ul>
<li>
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
</li>
</ul>
</div>
<button type="" class="menu-btn"><i class="fa fa-bars" aria-hidden="true"></i></button>
</header>
<div class="hero-image">
<div class="about-me">
<div class="row">
<label>Hi My Name is John Doe</label>
Lorem ipsum
Lorem ipsum
</div>
</div>
</div>

CSS: safari animation issue

before posting, I have read:
Safari 8 Only CSS Animation Issue
Alright, I am building a css button, some issue only occurs in Safari.
if you run the snippets in Chrome, it works exactly what I expect.
if you run this in Safari, the span effect doesn't work well.
body{
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(-30deg,#1ec4e9 0%,#673ab7 50%,#262626 50%,#607d8b 100%);
}
a{
position: relative;
padding: 25px 50px;
text-decoration: none;
color: #fff;
font-size: 2em;
text-transform: uppercase;
font-family: sans-serif;
letter-spacing: 4px;
overflow: hidden;
background: rgba(255,255,255,.1);
box-shadow: 0 5px 5px rgba(0,0,0,.2);
}
a::before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background: rgba(255,255,255,.1);
}
a::after{
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
transition: 0.5s;
}
a:hover::after{
left: 100%;
}
a span{
position: absolute;
display: block;
transition: 0.5s ease;
}
a span:nth-child(1){
top: 0;
left: 0;
width: 0;
height: 1px;
background: #fff;
}
a:hover span:nth-child(1){
width: 100%;
transform: translateX(100%);
}
a span:nth-child(3){
bottom: 0;
right: 0;
width: 0;
height: 1px;
background: #fff;
}
a:hover span:nth-child(3){
width: 100%;
transform: translateX(-100%);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href='#'>
<span></span>
<span></span>
<span></span>
<span></span>
Button
</a>
</body>
</html>
I have tried to add browser support such as:
-webkit-transform: translateX(-100%);
-o-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-moz-transform: translateX(-100%);
but it still doesn't work. Could someone offers some suggestions, I want Safari to give the same result as chrome.
UPDATE
This must be a priority issue since I tried:
body{
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(-30deg,#1ec4e9 0%,#673ab7 50%,#262626 50%,#607d8b 100%);
}
a{
position: relative;
padding: 25px 50px;
text-decoration: none;
color: #fff;
font-size: 2em;
text-transform: uppercase;
font-family: sans-serif;
letter-spacing: 4px;
overflow: hidden;
background: rgba(255,255,255,.1);
box-shadow: 0 5px 5px rgba(0,0,0,.2);
}
a::before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background: rgba(255,255,255,.1);
}
a::after{
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
-webkit-transition: 2s;
}
a:hover::after{
left: 100%;
}
a span{
position: absolute;
display: block;
-webkit-transition: 2s ease;
}
a span:nth-child(1){
position: relative;
top: 0;
left: 0;
width: 0;
height: 1px;
background: #fff;
}
a:hover span:nth-child(1){
width: 100%;
-webkit-transform: translateX(100%);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href='#'>
<span></span>
<span></span>
<span></span>
<span></span>
Button
</a>
</body>
</html>

Make it as you made it for your shadow (in ::after), use left or right:
a:hover span:nth-child(1){
width: 100%;
/*-webkit-transform: translateX(100%);*/
left:100%;
}
a:hover span:nth-child(3){
width: 100%;
/*transform: translateX(-100%);*/
right: 100%;
}
Demo (1):
body{
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(-30deg,#1ec4e9 0%,#673ab7 50%,#262626 50%,#607d8b 100%);
}
a{
position: relative;
padding: 25px 50px;
text-decoration: none;
color: #fff;
font-size: 2em;
text-transform: uppercase;
font-family: sans-serif;
letter-spacing: 4px;
overflow: hidden;
background: rgba(255,255,255,.1);
box-shadow: 0 5px 5px rgba(0,0,0,.2);
}
a::before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background: rgba(255,255,255,.1);
}
a::after{
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
transition: 0.5s;
}
a:hover::after{
left: 100%;
}
a span{
position: absolute;
display: block;
transition: 0.5s ease;
}
a span:nth-child(1){
top: 0;
left: 0;
width: 0;
height: 1px;
background: #fff;
}
a:hover span:nth-child(1){
width: 100%;
/*transform: translateX(100%);*/
left: 100%;
}
a span:nth-child(3){
bottom: 0;
right: 0;
width: 0;
height: 1px;
background: #fff;
}
a:hover span:nth-child(3){
width: 100%;
/*transform: translateX(-100%);*/
right: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href='#'>
<span></span>
<span></span>
<span></span>
<span></span>
Button
</a>
</body>
</html>
DEMO (update):
body{
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(-30deg,#1ec4e9 0%,#673ab7 50%,#262626 50%,#607d8b 100%);
}
a{
position: relative;
padding: 25px 50px;
text-decoration: none;
color: #fff;
font-size: 2em;
text-transform: uppercase;
font-family: sans-serif;
letter-spacing: 4px;
overflow: hidden;
background: rgba(255,255,255,.1);
box-shadow: 0 5px 5px rgba(0,0,0,.2);
}
a::before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background: rgba(255,255,255,.1);
}
a::after{
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
-webkit-transition: 2s;
}
a:hover::after{
left: 100%;
}
a span{
position: absolute;
display: block;
-webkit-transition: 2s ease;
}
a span:nth-child(1){
position: relative;
top: 0;
left: 0;
width: 0;
height: 1px;
background: #fff;
}
a:hover span:nth-child(1){
width: 100%;
/*-webkit-transform: translateX(100%);*/
left:100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href='#'>
<span></span>
<span></span>
<span></span>
<span></span>
Button
</a>
</body>
</html>

CSS: How do I stretch a background with a different z-index to height of page contents

So I am building a webpage and I can't find a way to dynamically stretch the background (with a different z-index) to the start of the page footer. I have searched for javascript, jquery and css approaches but no dice. Anyone know how to do this? Here is my code:
<html>
<head>
<style>
*
{
list-style: none;
text-decoration:none;
padding: 0;
margin: 0;
}
html
{
margin: 0 auto;
width: 100%;
background: #ccc;
}
body
{
margin: 0;
padding: 0;
}
#page
{
width: 100%;
}
#grey_block_left
{
width: 30%;
background-color: #333333;
height: 100%;
left: 0px;
top: 0px;
position: absolute;
z-index: 0;
}
#purple_block_right
{
width: 70%;
background-color: #9966cc;
height: 100%;
right: 0px;
top: 0px;
position: absolute;
z-index: 0;
}
#content
{
width: 70%;
margin: 0 auto;
background-color: #fff;
height: 1000px;
position: relative;
z-index: 5;
margin-top: 150px;
margin-bottom: 50px;
padding: 20px;
}
#footer
{
position: relative;
z-index: 5;
width: 100%;
height: 300px;
background-color: #333;
color: white;
}
</style>
</head>
<body>
<div id="page">
<div id="grey_block_left"></div>
<div id="purple_block_right"></div>
<div id="content">
<h1>Content</h1>
</div>
<div id="footer">
</div>
</div>
</body>
</html>

You'll get the offsetTop of the footer and that would be the height of the z index #purple_block_right and #grey_block_left
footer_height = document.getElementById("footer").offsetTop
document.getElementById("grey_block_left").style.height = footer_height + "px";
document.getElementById("purple_block_right").style.height = footer_height + "px";
Hope it helps

How about this? changing absolute to fixed?
<html>
<head>
<style>
*
{
list-style: none;
text-decoration:none;
padding: 0;
margin: 0;
}
html
{
margin: 0 auto;
width: 100%;
background: #ccc;
}
body
{
margin: 0;
padding: 0;
}
#page
{
width: 100%;
}
#grey_block_left
{
width: 30%;
background-color: #333333;
height: 100%;
left: 0px;
top: 0px;
position: fixed;
z-index: 0;
}
#purple_block_right
{
width: 70%;
background-color: #9966cc;
height: 100%;
right: 0px;
top: 0px;
position: fixed;
z-index: 0;
}
#content
{
width: 70%;
margin: 0 auto;
background-color: #fff;
height: 1000px;
position: relative;
z-index: 5;
margin-top: 150px;
margin-bottom: 50px;
padding: 20px;
}
#footer
{
position: relative;
z-index: 5;
width: 100%;
height: 300px;
background-color: #333;
color: white;
}
</style>
</head>
<body>
<div id="page">
<div id="grey_block_left"></div>
<div id="purple_block_right"></div>
<div id="content">
<h1>Content</h1>
</div>
<div id="footer">
</div>
</div>

Centered image map bigger than portrait mode in mobile. How to fix?

So I just made a very simple website where an image is dead centre on the page. It's actually an image map.
The issue that I'm having is that on mobile it's wider than the phone in portrait mode.
How can I make it so the image is contained within the screen on mobile?
Here's the link:
www.thelastdescendantfilm.com
And here's the code:
body {
background-color: #000000;
margin: 0;
padding: 0;
color: #000;
}
a img {
border: none;
}
img.center {
display: block;
margin-left: auto;
margin-right: auto;
}
#horizon
{
color: white;
background-color: transparent;
text-align: center;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 1px;
overflow: visible;
visibility: visible;
display: block
}
#content
{
font-family: Verdana, Geneva, Arial, sans-serif;
background-color: transparent;
margin-left: -564px;
position: absolute;
top: -254px;
left: 50%;
width: 1129px;
height: 508px;
visibility: visible
}
.map_image { display: block; width: 1129px; height: 508px; position: relative; background-position: 0 0; background-repeat: no-repeat; }
.map_image .map_link { display: block; position: absolute; text-indent: -999em; overflow: hidden; }
.map_image #map_link_0 { width: 434px; height: 56px; top: 390px; left: 662px; }
.map_image #map_link_1 { width: 261px; height: 48px; top: 453px; left: 836px; }
</style></head>
<body>
<div id="horizon">
<div id="content">
<div class="map_image" style="background-image: url('tldmain.jpg');">
<a class="map_link" id="map_link_0" title="" href="http://igg.me/p/the-last-descendant/x/6785523">Join Us</a>
<a class="map_link" id="map_link_1" title="" href="http://www.facebook.com/thelastdescendant">Follow Us</a>
</div>
</div>
<!-- end .container --></div>
</body>

Resources