I'm having trouble aligning my navigation to the top left corner of my site. I know what the issue is, it's that it's in a div with display flex and justify content center. But I cant move it out of the div or it will be above the whole page.
I feel like this must be a simple fix, but I just can't think straight right now. So how could I fix this?
I tried creating a new div outside of the header and one inside but can't fix it.
Here's the site. Thanks
Edit: Forgot about position: fixed lol
<html><head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link href="https://fonts.googleapis.com/css?family=Crimson+Text:600" rel="stylesheet">
<title>Pink</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#-ms-viewport {
width: device-width;
}
header {
background-color: #fdd1d2;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
border: 4px red solid;
}
.nav {
padding: 1vw;
font-family: 'Crimson Text', serif;
border: 1px green solid;
height: 15vh;
}
.header {
line-height: 100vh;
background-image: url('header.jpg');
background-size: cover;
border: 4px blue solid;
margin-top: 25vh;
height: 50vh;
width: 50vw;
font-family: 'Crimson Text', serif;
font-size: 1.5vw;
/*color: #fdd1d2;*/
}
.text {
/*margin-top: -.75vh;*/
}
ul {
list-style: none;
}
a {
font-size: 1.5vw;
color: black;
text-decoration: none;
transition: color .5s ease-out;
}
a:hover {
color: #ffcccd;
}
body {
overflow: hidden;
}
li {
list-style-type: none;
}
/* 6+Portrait */
#media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {
.text {
font-size: 3vw;
}
#-ms-viewport {
width: device-width;
}
a {
font-size: 5vw;
color: black;
text-decoration: none;
transition: color .5s ease-out;
}
a:hover {
color: #ffcccd;
}
}
</style>
</head>
<body cz-shortcut-listen="true">
<header style="
justify-content: space-between;
">
<div class="nav" style="
display: flex;
justify-content: normal;
">
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
<div class="header" style="
width: 100%;
display: flex;
margin: 100px 300px;
">
<div class="text" style="
/* width: 100%; */
">
<h1>1080 Benchmarks </h1>
</div>
</div>
</header>
</body></html>
You could add this to the CSS for .nav
position: absolute;
left: 0;
That makes it independent from the rest - on small screens it might overlap, but for medium to large screens it's the easiest solution. (BTW: position: fixed has the same effect in this particular situation
Everything else would involve changing your HTML.
Related
The aim of the code is that the background of the inner text div is of full height of the available body height (Without the need to scroll down) .
The code works for laptop screen and for ipad dimensions (In chrome developer tools) .
The problem is with cellphones . The background height doesn't reach to the bottom of the page and just instead the default height of the image .
The used code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* Beginning of global variables*/
:root {
--main-color: #11cab7;
}
/* End of global variables */
/* Beginning of Global rules */
* {
box-sizing: border-box;
}
body {
font-family: 'Work Sans', sans-serif;
}
.container {
width: 600px;
padding-left: 15px;
padding-right: 15px;
margin-left: auto;
margin-right: auto;
}
/*.Small.*/
#media (min-width: 768px) {
.container {
width: 750px;
}
}
/* Medium.*/
#media (min-width: 992px) {
.container {
width: 970px;
}
}
/* Large */
#media (min-width: 1200px) {
.container {
width: 1170px;
}
}
/* End of global rules */
/* Begin of header styling */
.header {
padding: 20px;
}
.container {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
width: 100px;
height: 40px;
}
.links {
position: relative;
}
.header .links .icon {
width: 30px;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
cursor: pointer;
}
.header .links .icon span {
background-color: #333;
height: 2px;
margin-bottom: 5px;
}
.header .links .icon span:first-child {
width: 100%;
}
.header .links .icon span:nth-child(2) {
width: 60%;
transition: .3s linear;
}
.header .links .icon span:last-child {
width: 100%;
}
.header .links .icon:hover span:nth-child(2){
width: 100%;
}
.header .container ul {
list-style-type: none;
display: block;
position: absolute;
background-color: #f6f6f6;
min-width: 200px;
padding: 0;
right: 0;
display: none;
}
.header .container ul::before {
content: "";
border-width: 10px;
border-style: solid;
border-color: transparent transparent #f6f6f6 transparent;
position: absolute;
right: 5px;
top: -20px;
}
.header .container ul li {
display: block;
padding: 15px;
transition: .2s;
}
.header .container ul li:hover {
padding-left: 25px;
}
.header .container ul li a {
text-decoration: none;
color: #333;
}
.header .container ul li:not(:last-child) {
border-bottom: 1px solid #ddd;
}
.header .container .links:hover ul {
display: block;
transition: 0.1s;
z-index: 1;
}
/* End of header styling */
/* Beginning of landing section */
.landing {
background-image: url(https://elzerowebschool.github.io/HTML_And_CSS_Template_One/images/landing.jpg);
background-size: cover;
min-width: 620px;
height: calc(100vh - 80px);
position: relative;
}
.landing .intro-text {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
width: 320px;
max-width: 100%;
}
.landing .intro-text h1 {
margin: 0;
font-size: 50px;
color: var(--main-color);
}
.landing .intro-text p {
font-size: 19px;
line-height: 1.8;
}
/* End of landing section */
</style>
<!-- Google fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght#200;400;500;600;700;800&display=swap" rel="stylesheet">
</head>
<body>
<!-- The use of the container is that our text not start from
the beginning of the webpage as it is visually not good -->
<!-- Beginning of header -->
<div class="header">
<div class="container">
<img class="logo" src="https://elzerowebschool.github.io/HTML_And_CSS_Template_One/images/logo.png" alt="logo image" >
<div class="links">
<span class="icon">
<span></span>
<span></span>
<span></span>
</span>
<ul>
<li>
Services
</li>
<li>
Portfolio
</li>
<li>
About
</li>
<li>
Contact
</li>
</ul>
</div>
</div>
</div>
<!-- End of header -->
<!-- Beginning of sections -->
<div class="landing">
<div class="intro-text">
<h1>Hello there</h1>
<p>We are Leon - Super creative and minimal agency
Web Template
</p>
</div>
</div>
<!-- End of sections -->
</body>
</html>
I would be thankful for the solution that uses pure CSS
I think this happens because of overflowing
you need to set overflow-x on html and body hidden like:
body, html{
overflow-x: hidden;
}
this will break your navbar, but you can add this to fix it:
.header .container{
width:100%;
}
and finally, for the text remove the max-with:620px to make it more responsive.
Hope it will help you.
I've been playing about with media queries in hopes of getting my head around creating a responsive page.
I seem to have got it working but I've noticed that my hover effects in the navbar <li> items are no longer working when I reduce the page size to meet the media query regarding the smaller screen...is this just something that happens when you reduce the screen size or is it been overridden somewhere?
html {
scroll-behavior: smooth;
}
body{
font-family: 'Nunito';
background: linear-gradient(#47585B, #E8EFF0);
}
h1 {
letter-spacing: 2px;
}
h2 {
letter-spacing: 2px;
/* border: 1px solid black; */
}
/* Underline on Company Name */
h1::after{
content: "";
display: block;
position: absolute;
left: 0;
width: 100%;
height: 0px;
margin-top: 0.1em;
padding-top: 0.25rem;
background: linear-gradient(90deg, #47585B, #47585B20);
}
header {
background-color: #e6763c90;
box-sizing: border-box;
padding: 0 2rem;
box-shadow: 2px 0px 100px 10px #e6763c90;
text-align: center;
position: fixed;
top: 0px;
right: 0px;
width: 100vw;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 1;
}
ul {
margin: 0;
padding: 20px;
list-style: none;
/* border: 1px solid black; */
}
a {
color: black;
text-decoration: none;
}
li {
display: inline-block;
padding: 7px;
margin: 0 0 0 2.5em;
text-align: center;
border-radius: 5px;
transition: all 0.2s ease;
}
.container {
height: 70vh;
padding: 10rem;
text-align: center;
/* border: 1px solid black; */
}
.dropDown{
display: none;
}
/* On hover animations */
li:hover{
transform: scale(1.08);
}
/* Smaller Screen */
#media (max-width: 1100px) {
header {
background-color: #e6763c90;
box-sizing: border-box;
padding-left: 0.25rem;
right: 0px;
text-align: center;
position: fixed;
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
li {
display: inline;
margin: 2rem;
z-index: 1000;
}
ul {
position: relative;
bottom: 1.4rem;
}
/* Adjust underline on smaller screen */
h1::after{
content: "";
display: none;
position: absolute;
width: 100%;
margin-top: 1.5em;
left: 0;
height: 0px;
padding-top: 0.25rem;
background: #47585B
}
li::after{
content: "";
position: absolute;
width: 100%;
margin-top: 1.5em;
left: 0;
height: 0px;
padding-top: 0.25rem;
background: linear-gradient(90deg, #47585B, #47585B20);
z-index: 10000;
}
}
/* Mobile */
#media (max-width: 800px) {
header {
background-color: #e6763c90;
box-sizing: border-box;
padding-left: 0.25rem;
right: 0px;
text-align: center;
position: fixed;
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.navbar {
display:none;
margin:1.2rem;
}
/* Adjust underline on mobile */
h1::after{
content: "";
position: absolute;
width: 100%;
margin-top: 0.1em;
left: 0;
height: 0px;
padding-top: 0.25rem;
background: #47585B
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito" rel="stylesheet">
<link href="styleSheet.css" rel="stylesheet"></link>
<title>Original Tombstones</title>
</head>
<body>
<header>
<h1 class="">Original Tombstones</h1>
<ul class="navbar">
<li>New Memorials</li>
<li>Additionals</li>
<li>Renovations</li>
<li>Contact Us</li>
</ul>
</header>
<div class="container" id="home">
<h2>About Us</h2>
</div>
<div class="container" id="new">
<h2>New Memorials</h2>
</div>
<div class="container" id="additionals">
<h2>Additional Inscriptions</h2>
</div>
<div class="container" id="renovations">
<h2>Renovations</h2>
</div>
<div class="container" id="contact">
<h2>Get In Touch</h2>
</div>
</body>
</html>
I apologise in advance if my code looks messy but I've not got my head round that bit yet!
Cheers!
So without a media-query you've set the <li> elements to display: inline-block; Right now your li:hover{transform: scale(1.08);} works fine.
But then in one of your media-queries you set the <li>elements to display: inline;. Not really sure why tough, guess what you want will work with inline-block as well and this breaks the scaling right now. You're hover problem would be fixed if youjust removed the display:inline; line in youre media-query .
Try to add the following keywords: only, screen on the media queries ex:
#media only screen (max-width: 800px) {
Also add the following meta tag on your html head :
<meta name="viewport" content= "width=device-width, initial-scale=1.0">
https://www.w3schools.com/css/css_rwd_viewport.asp
Hello i am creating a website for fun (I was bored) i am making it responsive using media query in css but i encountered a problem i already have a title in html for desktop and a second title for mobile i want the second title (for mobile) to be show in mobile but not in desktop here is my home.html
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Beast Code's</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #111111;
}
</style>
<ul>
<li>Home</li>
<li>Skills</li>
<li>About</li>
<li>Contact</li>
</ul>
</head>
<body>
<div class="conatiner-1">
<div class="container">
<div class="title">
<h1>I am CaptainBeast</h1>
</div>
<div class="avatar">
<img src="stuffs/pfp.jpg">
</div>
<div class="mobile-t">
<h1>Hello i am CaptainBeast</h1>
</div>
</div>
</div>
</body>
</html>
my style.css
*{
margin: 0;
padding: 0;
}
#import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');
#import url('https://fonts.googleapis.com/css?family=Source+Code+Pro');
.conatiner-1{
height: 100vh;
width: 100%;
background-image: url(stuffs/background.png);
background-position: center;
background-size: cover;
padding-left: 5%;
padding-right: 5%;
box-sizing: border-box;
position: relative;
}
.title{
font-size: 36px;
font-family: 'Oswald', sans-serif;
color: blue;
margin-left: 425px;
top: 100px;
position: relative;
}
.title {
border-right: solid 3px rgba(0,255,0,.75);
white-space: nowrap;
overflow: hidden;
font-family: 'Source Code Pro', monospace;
font-size: 28px;
color: rgba(90, 145, 207, 0.7);
}
/* Animation */
.title {
animation: animated-text 4s steps(29) 1s 1 normal both,
animated-cursor 600ms steps(29) infinite;
}
/* text animation */
#keyframes animated-text{
from{width: 0;}
to{width: 580px;}
}
/* cursor animations */
#keyframes animated-cursor{
from{border-right-color: rgba(0,255,0,.75);}
to{border-right-color: transparent;}
}
#media only screen and (min-width: 900px){
.avatar img{
display: none;
}
}
.title-m{
overflow: hidden;
}
.mobile-t{
display: none;
}
#media screen and (max-width: 400px){
.container{
overflow: hidden;
}
.conatiner-1{
height: 100vh;
width: 100%;
background-image: url(stuffs/background.png);
background-position: center;
background-size: cover;
padding-left: 5%;
padding-right: 5%;
box-sizing: border-box;
position: relative;
}
.avatar img{
border-radius: 50%;
height: 300px;
width: 320px;
position: relative;
left: 1000px;
top: 60;
image-resolution: from-image;
}
.mobile-t{
font-size: 16px;
}
}
Hope i will get a nice answer Thanks in advance!!
I've used this on some projects and it actually works for me.
To make a section show on mobile:
<div class="mobileShow">
TEXT OR IMAGE FOR MOBILE HERE
</div>
<style type="text/css">
.mobileShow { display: none;}
/* Smartphone Portrait and Landscape */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){ .mobileShow { display: inline;}}
</style>
To make a section hide on mobile devices:
<div class="mobileHide">
TEXT OR IMAGE NOT FOR MOBILE HERE
</div>
<style type="text/css">
.mobileHide { display: inline;}
/* Smartphone Portrait and Landscape */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){ .mobileHide { display: none;}}
</style>
Okay, I found a solution: with #media I'm accessing the image's width and the bar separately and it's working but is there any shorter way codewise?
I searched the internet for a solution but none of what I found helped me so far.
I'm trying to make my header to be responsive to the browser's width but it isn't working.
I tried to make just the image responsive or just the top bar but nothing works...
Any ideas?
<header class="header">
<div class="top-bar">
<div class="nav-container">
<ul class="navbar">
<li>החשבון שלי</li>
<li>המתכונים שלי</li>
<li>אודות</li>
<li class="last-btn">צרו קשר</li>
</ul>
</div>
</div>
<div class="banner">
<img src="Images\maadanot_winter_banners.jpg" alt="אפייה חורפית"/>
</div>
</header>
and this is the css:
body {
margin: 0;
}
.top-bar {
width: 100%;
background-color: #404040;
padding: 12px;
}
.nav-container {
width: 68%;
margin: auto;
}
.navbar {
margin: 0;
list-style-type: none;
background-color: #404040;
display: table;
font-family: Helvetica;
font-size: 14px;
}
.navbar li {
display: table-cell;
border-left: 1px solid white;
padding: 0px 10px;
overflow: hidden;
width: 85px;
text-align: center;
}
.navbar a {
color: white;
text-decoration: none;
}
.navbar a:hover {
font-weight: bold;
}
#media screen and (max-width:900px) {
.header {
width: 100%;
}
}
.banner {
margin-top: 33px;
width: 100%;
text-align: center;
}
Try to change it into:
#media screen and (max-width:900px) {
.header {
width: 100vw; /* viewport width */
}
}
device-width is not correct value for width.
Use : <
meta name="viewport" content="width=device-width, initial-scale=1">
The width property controls the size of the viewport. It can be set to a specific number of pixels like width=600 or to the special value device-width, which is the width of the screen in CSS pixels at a scale of 100%.
The initial-scale property controls the zoom level when the page is first loaded. The maximum-scale, minimum-scale, and user-scalable properties control how users are allowed to zoom the page in or out.
When you are working om Media Queries, You have to need change inherit property if you declare cascaded down.If you have set Backgruond images on the body, there is need a queries to cancel background images.
The keyword ‘only’ can also be used to hide style sheets from older user agents. User agents must process media queries starting with ‘only’ as if the ‘only’ keyword was not present.
It's not really clear what you want, but to get your image span the whole width in all sizes, you can add this rule:
.banner img {
width: 100%;
}
This will size the image within its container (which has 100% width, so eventually the image will span the width).
BTW: .banner is a DIV that will be 100% wide anyway, so you actually can erase the 100% width for .banner
body {
margin: 0;
}
.top-bar {
width: 100%;
background-color: #404040;
padding: 12px;
}
.nav-container {
width: 68%;
margin: auto;
}
.navbar {
margin: 0;
list-style-type: none;
background-color: #404040;
display: table;
font-family: Helvetica;
font-size: 14px;
}
.navbar li {
display: table-cell;
border-left: 1px solid white;
padding: 0px 10px;
overflow: hidden;
width: 85px;
text-align: center;
}
.navbar a {
color: white;
text-decoration: none;
}
.navbar a:hover {
font-weight: bold;
}
#media screen and (max-width:900px) {
.header {
width: 100%;
}
}
.banner {
margin-top: 33px;
}
.banner img {
width: 100%;
}
<header class="header">
<div class="top-bar">
<div class="nav-container">
<ul class="navbar">
<li>החשבון שלי</li>
<li>המתכונים שלי</li>
<li>אודות</li>
<li class="last-btn">צרו קשר</li>
</ul>
</div>
</div>
<div class="banner">
<img src="http://placehold.it/1200x90/fa0" alt="אפייה חורפית" />
</div>
</header>
I want to hide the menu only when the screen size 320px is ... Now the menu is always hidden and I need to call them.
when the screen size 320px is, then is ok, when i need to call #main-nav, but by default size must be visible
* {
box-sizing: border-box;
}
html, body {
min-height: 100%;
font-size: 11pt;
font-family: 'PT Sans', Arial, sans-serif;
}
.main-header {
background: linear-gradient(#3F94BF, #246485);
padding: 5px;
text-align: center;
color: white;
text-shadow: #222 0px -1px 1px;
position: relative;
width: 100%;
transition: all 0.3s ease;
}
.page-wrap {
float: right;
width: 100%;
transition: width 0.3s ease;
}
nav a {
color: #fff;
display: block;
text-align: center;
text-decoration: none;
line-height: 40px;
text-shadow: 1px 1px 0px #283744;
}
nav a:hover, nav a:active {
background-color: #8c99a4;
}
.main-nav {
position: fixed;
width: 0;
height: 100%;
font-weight: bold;
background: linear-gradient(#3F94BF, #246485);
overflow: hidden;
transition: width 0.3s ease;
}
.content {
overflow: hidden;
padding: 20px 20px 20px 20px;
}
#close-menu {
display: none;
}
#open-menu {
display: block;
}
#main-nav:target {
width: 20%;
}
#main-nav:target + .page-wrap {
width: 80%;
.open-menu {
display: block;
}
.close-menu {
display: none;
}
.main-header {
width: 80%;
left: 20%;
}
}
/*Styles for screen 515px and lower*/
#media only screen and (max-width: 480px) {
}
html
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Language" content="de" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/main.css" media="screen" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<nav class="main-nav" id="main-nav">
Details
Adresses
Kontakt
</nav>
<div class="page-wrap">
<header class="main-header">
☰
close
<h1>VIGOUI</h1>
</header>
<div class="content">
It’s all about playing four quarters. I think we played well but the other team played well too. They took advantage of certain circumstances that arose. It’s a physical game.
</div>
</div>
</body>
</html>
First you need the media query (http://jsfiddle.net/3X8Tq/)
#media all and (min-width: 320px) {
#main-nav {
width: 20%;
}
.page-wrap {
width: 80%;
}
}
That works great for small windows, but for large screens the close button doesn't work. This is because the close button never worked. It only works because the CSS is only applying the open :target. So lets make the close button work. We have no open-menu or close-menu ids on the page, but you do have CSS for them.
See the HREF #main-nav points to the nav. there is no #close-menu id. Lets add one.
<div id="close-menu"></div>
And we'll put it before the nav. We will also add the css for #close-menu
#close-menu:target + #main-nav {
width: 0;
}
#close-menu:target ~ .page-wrap {
width: 100%;
left: 0;
}
Solution: http://jsfiddle.net/3X8Tq/1/
Looking at your css I believe you have a misunderstanding of how it works. The subclasses in your css only work with less css library. The #close-menu and #open-menu don't exist on the page. I suggest reading up on :target and css selectors in general.