I'm having trouble with getting my image to align next to a div. I have tried adding float right but that doesn't seem to be working. I have also tried playing around with different padding but it's only cause my wrapper div to not properly fully show as if its being cut off by a black box on the side or completely is out of the frame of the website. Also, for some reason, the image isn't showing up at all.
Html:
<body>
<div class="container">
<nav>
<div class="logo">dev simone</div>
<ul class="navItems">
<li>
<b class="nav1">.</b>home
</li>
<li>
<b class="nav1">.</b>projects
</li>
<li>
<b class="nav1">.</b>about-me
</li>
<li>
<b class="nav1">.</b>contact-me
</li>
</ul>
<div class="links">
<a
href="#"
target="_blank"
tabindex="1"
><i class="icono-linkedIn"></i
></a>
</div>
</nav>
<div class="wrapper">
<div class="cols cols0">
<span class="topline">Hello</span>
<h1>I'm a <span class="multiText">coder</span></h1>
<p>
Lorem ipsum.
</p>
<div class="btns">
<button class="textbtns">Resume</button>
<button class="textbtns">GitHub</button>
</div>
</div>
<div class="cols cols1">
<div class="imgbox">
<img src="#" id="splash" />
<img src="images/port-photo.PNG" alt="creator" />
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
#import url("https://fonts.googleapis.com/css2?family=Montserrat:wght#200&family=Zeyada&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Montserrat", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-touch-callout: none;
-webkit-text-size-adjust: none;
-ms-text-size-adjust: none;
text-size-adjust: none;
color: whitesmoke;
font-weight: bolder;
text-decoration: none;
}
html,
body {
height: 100%;
}
body {
overflow: hidden;
width: 100%;
height: 100%;
background-color: black;
}
.logo {
width: 100%;
min-height: 100vh;
display: flex;
font-family: "zeyada" cursive, sans-serif;
}
nav {
display: flex;
width: 100%;
justify-content: space-around;
height: 80px;
z-index: 111;
background-color: rgb(202, 184, 216);
line-height: 80px;
}
.logo {
display: flex;
font-family: "zeyada" cursive;
font-size: 40px;
font-weight: 800;
color: #382f4d;
letter-spacing: 0.2em;
cursor: pointer;
text-transform: uppercase;
white-space: nowrap;
}
b {
font-size: 100px;
font-weight: 800;
color: rgb(255, 54, 171);
}
.navItems {
display: flex;
justify-content: space-around;
align-items: center;
white-space: nowrap;
}
.navItems li {
list-style: none;
margin: 0 0.75em;
display: flex;
justify-content: space-around;
align-items: center;
margin-right: 2em;
font-size: 10px;
}
.navItems li a {
color: rgb(255, 54, 171);
font-size: 25px;
letter-spacing: 0.3em;
}
.navItems li:hover a {
color: #bffcc6;
}
.links a:hover {
color: rgb(255, 54, 171);
}
.links a {
font-size: 30px;
color: rgb(255, 54, 171);
margin: 25px 10px;
}
.wrapper {
display: flex;
width: 100vh;
height: 100vh;
justify-content: center;
align-items: center;
padding: 0 10%;
overflow: hidden;
transform: translateX(150px);
}
.topline {
display: block;
position: relative;
font-size: 35px;
letter-spacing: 5px;
color: white;
}
.topline::after {
position: absolute;
content: "";
height: 4px;
width: 45px;
bottom: 10px;
background-color: rgb(255, 54, 171);
}
h1 {
display: block;
font-size: 5.5em;
font-weight: 900;
font-weight: 800;
color: rgb(255, 54, 171);
white-space: nowrap;
}
.textbtns {
font-size: 25px;
color: rgb(225, 54, 171);
margin: 25px 10px;
text-decoration: none;
box-sizing: border-box;
justify-content: space-between;
align-items: center;
border: none;
background-color: rgb(0, 0, 0);
border-color: rgb(0, 0, 0);
}
.textbtns:hover {
color: rgb(0, 0, 0);
background-color: rgb(255, 54, 171);
cursor: pointer;
}
.multiText {
color: #bffcc6;
text-transform: capitalize;
}
p {
display: block;
width: 90%;
font-size: 1.2em;
color: antiquewhite;
}
.btns {
width: 100vh;
position: relative;
left: 150px;
justify-content: space-between;
}
button {
outline: #382f4d solid;
border-radius: 2;
border: solid 1px;
cursor: pointer;
font-size: 20px;
font-weight: 400;
box-shadow: 0 6px 7px white;
}
.imgbox {
position: relative;
width: 100%;
height: 100%;
float: right;
}
.imgbox img {
position: relative;
height: 100%;
width: calc(130% - 100px);
top: -100px;
right: 50px;
float: right;
}
CodePen
Related
I am trying to make a web page that has a top navigation panel and a image slider at the bottom. The image slider works fine. but the navigation panel doesnt respond to clicks or hover effects.
body {
margin: 0px;
padding: 10px;
background-color: #ccc9c9;
}
header{
width: 100%;
height: 70px;
background-color: #282828;
}
h1{
position: absolute;
padding: 3px;
float: left;
margin-left: 2%;
margin-top: 10px;
font-family: Calibri;
color: #39ca74;
}
span{
color: #ffffff
}
nav-btn a:hover{
text-decoration:underline;
}
li{
display: inline-block;
padding: 15px 30px;
}
a {
width: auto;
float: right;
margin-top: 8px;
text-decoration:underline;
text-align: center;
color:#ffffff
}
.box {
width: 300px;
box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.2);
border-radius: 10px;
overflow: hidden;
margin: 25px;
}
.slide-img {
height: 350px;
position: relative;
}
.slide-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.detail-box {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
box-sizing: border-box;
font-family: calibri;
}
.type {
display: flex;
flex-direction: column;
}
.type a {
color: #222222;
margin: 5px 0px;
font-weight: 700;
letter-spacing: 0.5px;
padding-right: 8px;
}
.type span {
color: rgba(26, 26, 26, 0.5);
}
.quantity {
color: #333333;
font-weight: 600;
font-size: 1.1rem;
font-family: poppins;
letter-spacing: 0.5px;
}
.overlay {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
background-color: rgb(190, 204, 191, 0.6);
display: flex;
justify-content: center;
align-items: center;
visibility: hidden;
}
.details-btn {
width: 160px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
background-color: #ffffff;
color: #252525;
font-weight: 700;
letter-spacing: 1px;
font-family: calibri;
border-radius: 20px;
box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.2);
}
.details-btn:hover {
color: #ffffff;
background-color: #288a40;
transition: all ease 0.3s;
}
.slide-img:hover .overlay {
visibility: visible;
animation: fade 0.5s;
}
#keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.slider {
width: 50%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
transform: translate(50%);
}
<header>
<nav>
<ul class="navigation">
<li>Home</li>
<li>Items</li>
<li>Browse</li>
<li>Add Items</li>
<li>Logout</li>
<li><input type="submit" value="Go to Google" />Logout</button></li>
</ul>
</nav>
</header>
<body>
<section class="slider">
<ul id="autoWidth" class="cs-hidden">
<li class="item-a">
<div class="box">
<div class="slide-img">
<img src="static/images/1.webp" alt="1" />
<div class="overlay">
View Details
</div>
</div>
<div class="detail-box">
<div class="type">
Camera & Camcorders
<span>Available Units: </span>
</div>
0
</div>
</div>
</li>
</ul>
</body>
Result:
Above code is the partial code for the html code I am using and the css is code is the complete one. As you can see, the hovering would effect it at all and they dont respond to clicks either
Maybe you can try this code, make sure you run in full screen
body {
margin: 0px;
padding: 10px;
background-color: #ccc9c9;
}
header{
width: 100%;
height: 70px;
background-color: #282828;
}
h1{
position: absolute;
padding: 3px;
float: left;
margin-left: 2%;
margin-top: 10px;
font-family: Calibri;
color: #39ca74;
}
span{
color: #ffffff
}
.nav-btn {
text-decoration: none;
}
.nav-btn:hover{
text-decoration:underline;
}
li{
display: inline-block;
padding: 15px 30px;
}
a {
width: auto;
float: right;
margin-top: 8px;
text-decoration:underline;
text-align: center;
color:#ffffff
}
.box {
width: 300px;
box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.2);
border-radius: 10px;
overflow: hidden;
margin: 25px;
}
.slide-img {
height: 350px;
position: relative;
}
.slide-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.detail-box {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
box-sizing: border-box;
font-family: calibri;
}
.type {
display: flex;
flex-direction: column;
}
.type a {
color: #222222;
margin: 5px 0px;
font-weight: 700;
letter-spacing: 0.5px;
padding-right: 8px;
}
.type span {
color: rgba(26, 26, 26, 0.5);
}
.quantity {
color: #333333;
font-weight: 600;
font-size: 1.1rem;
font-family: poppins;
letter-spacing: 0.5px;
}
.overlay {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
background-color: rgb(190, 204, 191, 0.6);
display: flex;
justify-content: center;
align-items: center;
visibility: hidden;
}
.details-btn {
width: 160px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
background-color: #ffffff;
color: #252525;
font-weight: 700;
letter-spacing: 1px;
font-family: calibri;
border-radius: 20px;
box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.2);
}
.details-btn:hover {
color: #ffffff;
background-color: #288a40;
transition: all ease 0.3s;
}
.slide-img:hover .overlay {
visibility: visible;
animation: fade 0.5s;
}
#keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.slider {
width: 50%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
transform: translate(50%);
}
<header>
<nav>
<ul class="navigation">
<li><a class="nav-btn" href="#">Home</a></li>
<li><a class="nav-btn" href="#">Items</a></li>
<li><a class="nav-btn" href="#">Browse</a></li>
<li><a class="nav-btn" href="#">Add Items</a></li>
<li><a class="nav-btn" href="#">Logout</a></li>
</ul>
</nav>
</header>
<body>
<section class="slider">
<ul id="autoWidth" class="cs-hidden">
<li class="item-a">
<div class="box">
<div class="slide-img">
<img src="static/images/1.webp" alt="1" />
<div class="overlay">
View Details
</div>
</div>
<div class="detail-box">
<div class="type">
Camera & Camcorders
<span>Available Units: </span>
</div>
0
</div>
</div>
</li>
</ul>
</body>
nav-btn a:hover{
text-decoration:underline;
}
looks like you've left out the . on the nav-btn class.
it should be
.nav-btn a:hover{
text-decoration:underline;
}
I'm trying to experiment on my design since i'm still understanding CSS, i can't understand why my image and text didn't align to each other on my navigation bar, this is what it looks like:
This is my code in HTML:
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.logo {
color: rgb(21, 168, 144);
text-transform: uppercase;
letter-spacing: 10px;
}
.logo img {
width: 50px;
height: 60px;
/* border: 2px solid black; */
margin: 0 0 0 15px;
float: left;
}
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
font-family: "Poppins", sans-serif;
background-color: rgb(245, 245, 245);
}
.nav-links {
display: flex;
justify-content: space-around;
width: 30%;
}
.nav-links li {
list-style: none;
padding: 20px 40px;
}
.nav-links a {
color: black;
text-decoration: none;
letter-spacing: 2px;
font-size: 15px;
}
<div class="logo">
<h4>
<img src="./rsc/Logo.png" alt="" /> Deux
</h4>
<!-- <img src="./rsc/DeuxLogo.png" alt="Deux Logo" class="imgLogo" /> -->
</div>
Please find flex implementation.
Add
h4 {
display: flex;
align-items: center;
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.logo {
color: rgb(21, 168, 144);
text-transform: uppercase;
letter-spacing: 10px;
}
.logo img {
width: 50px;
height: 60px;
/* border: 2px solid black; */
margin: 0 0 0 15px;
/* float: left; */
}
h4 {
display: flex;
align-items: center;
}
<div class="logo">
<h4>
<img
src="https://cdn3.iconfinder.com/data/icons/2018-social-media-logotypes/1000/2018_social_media_popular_app_logo_twitter-512.png"
alt="" />
Deux
</h4>
</div>
You can try setting vertical-align:middle to the <img> to align that
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.logo {
color: rgb(21, 168, 144);
text-transform: uppercase;
letter-spacing: 10px;
}
.logo img {
width: 50px;
height: 60px;
/* border: 2px solid black; */
margin: 0 0 0 15px;
}
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
font-family: "Poppins", sans-serif;
background-color: rgb(245, 245, 245);
}
.nav-links {
display: flex;
justify-content: space-around;
width: 30%;
}
.nav-links li {
list-style: none;
padding: 20px 40px;
}
.nav-links a {
color: black;
text-decoration: none;
letter-spacing: 2px;
font-size: 15px;
}
h4 img {vertical-align:middle;}
<div class="logo">
<h4>
<img src="https://media.flaticon.com/dist/min/img/stickers.png">
Deux
</h4>
</div>
Use flex as shown below
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.logo {
color: rgb(21, 168, 144);
text-transform: uppercase;
letter-spacing: 10px;
display: flex;
flex-direction: row;
align-items: center;
}
.logo img {
width: 50px;
height: 60px;
}
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
font-family: "Poppins", sans-serif;
background-color: rgb(245, 245, 245);
}
.nav-links {
display: flex;
justify-content: space-around;
width: 30%;
}
.nav-links li {
list-style: none;
padding: 20px 40px;
}
.nav-links a {
color: black;
text-decoration: none;
letter-spacing: 2px;
font-size: 15px;
}
<div class="logo">
<h4>
Deux
</h4>
<img src="./rsc/Logo.png" alt="" />
</div>
My code has two navigation bars. One in vertical and other in horizontal format.
The first issue:
I set the vertical bar such that it's scroll is active by this CSS code:
ul{
list-style-type: none;
text-align: center;
text-transform: capitalize;
overflow-y: scroll;
width: 250px;
height: auto;
position: relative;
left: -50px;
top: -62px;
}
But, the scroll doesn't work despite height of the bar is more than screen size. You can see that:
The second issue:
I set a dropdown bar that is display: none by default and should be visible whenever user hovers on Solidity item. The item's ID is Solidity. But, it is visible in a limited area that whole of the bar is not visible:
It's code is:
div.dropdownbar{
display: none;
color: black;
width: 200px;
overflow-y: hidden;
position: absolute;
left: 581px;
z-index: +1;
}
and
#Solidity:hover div.dropdownbar{
display: block;
}
I don't know what the problem is and how I can eliminate that. Please provide a solution.
Thank you.
Whole code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Text Learning</title>
<style>
*{
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
ul{
list-style-type: none;
text-align: center;
text-transform: capitalize;
overflow-y: scroll;
width: 250px;
height: auto;
position: relative;
left: -50px;
top: -62px;
}
li{
background-color: rgb(74, 183, 246);
padding: 15px;
font-weight: bold;
}
li.home{
background-color: blue;
color: white;
padding: 10px;
font-weight: bold;
}
li:hover:not(li.home){
background-color: rgb(0, 90, 173);
color: white;
}
header{
background-color: rgb(127, 203, 246);
color: white;
text-align: center;
font-size: 4vw;
padding: 35px;
font-weight: bold;
position: relative;
left: -10px;
top: -10px;
}
ul.horizontalbar{
display: inline-block;
background-color: rgb(55, 136, 184);
text-align: center;
text-transform: capitalize;
width: 100%;
position: relative;
top: -26px;
left: -15px;
}
li.horizontalitem{
display: inline-block;
background-color: rgb(55, 136, 184);
color: white;
padding: 15px;
font-weight: bold;
}
div.dropdownbar{
display: none;
color: black;
width: 200px;
overflow-y: hidden;
position: absolute;
left: 581px;
z-index: +1;
}
a.dropdownitem{
background-color: rgb(202, 225, 238);
padding: 15px;
}
#Solidity{
display: inline-block;
}
#Solidity:hover div.dropdownbar{
display: block;
}
</style>
</head>
<body>
<header>
My School
</header>
<ul class="horizontalbar">
<li class="horizontalitem">HTML</li>
<li class="horizontalitem">CSS</li>
<li class="horizontalitem">JavaScript</li>
<li class="horizontalitem" id="Solidity">Solidity
<div class="dropdownbar">
<a class="dropdownitem">Fundamentals</a>
<a class="dropdownitem">External Call</a>
<a class="dropdownitem">Interface</a>
<a class="dropdownitem">Abstract Contract</a>
<a class="dropdownitem">Secure Coding</a>
</div>
</li>
<li class="horizontalitem">Vyper</li>
<li class="horizontalitem">Truffle</li>
<li class="horizontalitem">Mythril</li>
</ul>
<ul>
<li class="home">HTML</li>
<li>CSS</li>
<li>SVG</li>
<li>JavaScript</li>
<li>ReactJS</li>
<li>NodeJS</li>
<li>ExpressJS</li>
<li>Web3JS</li>
<li>EthereumJS</li>
<li>EthersJS</li>
<li>Solidity</li>
<li>Vyper</li>
<li>Truffle</li>
<li>Mythril</li>
<li>Slither</li>
</ul>
</body>
</html>
I did refactor your code, for improve it. And fixed issues you wanted to solve.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
body {
width: 100%;
height: 100%;
display: grid;
grid-template-columns: 180px 1fr;
grid-template-rows: 150px 50px 1fr;
grid-template-areas:
'header header'
'horizontalbar horizontalbar'
'verticalbar main';
}
ul {
list-style-type: none;
}
li {
padding: 15px;
font-weight: bold;
}
li.home {
background-color: blue;
color: white;
padding: 10px;
font-weight: bold;
}
li:hover:not(li.home) {
background-color: rgb(0, 90, 173);
color: white;
}
header {
grid-area: header;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(127, 203, 246);
color: white;
font-size: 4vw;
font-weight: bold;
}
ul.horizontalbar {
grid-area: horizontalbar;
align-self: center;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
background-color: rgb(55, 136, 184);
}
li.horizontalitem {
width: max-content;
background-color: rgb(55, 136, 184);
color: white;
padding: 15px;
font-weight: bold;
}
li.horizontalitem#solidity {
position: relative;
}
.dropdownbar {
display: none;
flex-direction: column;
color: black;
width: max-content;
height: max-content;
position: absolute;
left: 50%;
top: 50px;
transform: translateX(-50%);
}
a.dropdownitem {
background-color: rgb(202, 225, 238);
padding: 15px;
}
#solidity {
display: flex;
}
#solidity:hover div.dropdownbar {
display: flex;
}
ul.verticalbar {
grid-area: verticalbar;
height: calc(100vh - 200px); /* 150px + 50px // header + menu height */
min-height: 100%;
display: flex;
flex-direction: column;
text-align: center;
overflow-y: auto;
background-color: rgb(74, 183, 246);
}
<header>My School</header>
<ul class="horizontalbar">
<li class="horizontalitem">HTML</li>
<li class="horizontalitem">CSS</li>
<li class="horizontalitem">JavaScript</li>
<li class="horizontalitem" id="solidity">
Solidity
<div class="dropdownbar">
<a class="dropdownitem">Fundamentals</a>
<a class="dropdownitem">External Call</a>
<a class="dropdownitem">Interface</a>
<a class="dropdownitem">Abstract Contract</a>
<a class="dropdownitem">Secure Coding</a>
</div>
</li>
<li class="horizontalitem">Vyper</li>
<li class="horizontalitem">Truffle</li>
<li class="horizontalitem">Mythril</li>
</ul>
<ul class="verticalbar">
<li class="home">HTML</li>
<li>CSS</li>
<li>SVG</li>
<li>JavaScript</li>
<li>ReactJS</li>
<li>NodeJS</li>
<li>ExpressJS</li>
<li>Web3JS</li>
<li>EthereumJS</li>
<li>EthersJS</li>
<li>Solidity</li>
<li>Vyper</li>
<li>Truffle</li>
<li>Mythril</li>
<li>Slither</li>
</ul>
I'm trying to create a small website and want to place an image (logo, square, svg) in the navbar. I want the logo to fit the navbar but it simply just won't scale no matter what I try.
I've tried floating a div with the image to the left and the navbar to the right but it still won't scale. It's really frustrating.
Here's an image of the problem:
Here's my code (sorry it's messy):
#import url('https://fonts.googleapis.com/css?family=Montserrat');
.heading {
display: inline-block;
font-family: "Montserrat";
font-weight: lighter;
text-align: left;
margin-left: 20vw;
line-height: 30vw;
}
body {
width: 100%;
margin: auto;
font-family: 'Montserrat', sans-serif;
background-color: white;
}
.container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
margin-top: 30px;
flex-flow: row wrap;
margin-top: -10vw;
}
img {
margin: 9px;
transition: filter 0.2s;
filter: brightness(100%);
display: inline-block;
min-height: 100px;
height: 50vh;
}
img:hover {
filter: brightness(80%);
}
.responsive:hover {}
header {
position: relative;
height: 50vh;
background-image: linear-gradient(rgb(50, 50, 50), rgb(30, 30, 30));
margin-top: -20px;
transform: skewY(-5deg);
transform-origin: top left;
}
.fullwidth {
width: 100%;
}
.headertitle {
margin-top: -36vh;
margin-left: 12vw;
position: absolute;
font-size: calc(13px + 2.5vw);
color: white;
font-family: 'Montserrat';
font-weight: lighter;
}
/* navbar */
nav {
background: rgb(52, 52, 52);
position: relative;
z-index: 1;
height: calc(18px + 6vh);
box-shadow: 0 3px 3px -1px rgba(0, 0, 0, 0.065);
overflow: auto;
width: 100vw;
}
nav ul {
margin: 0;
padding: 0;
text-align: left;
margin-left: 1.2vw;
}
nav ul li {
display: inline-block;
list-style: none;
font-size: 1.2em;
padding: 1vh;
}
.navul a {
text-decoration: none;
color: white;
line-height: 5.5vh;
height: 5.5vh;
font-size: calc(15px + 0.25vh + 0.15vw);
}
.navuul a:visited,
a:link,
a:active {
text-decoration: none;
color: white;
font-weight: 200;
line-height: 5.5vh;
height: 5.5vh;
}
.navuul a:hover {
text-decoration: none;
color: grey;
font-weight: 200;
line-height: 5.5vh;
height: 5.5vh;
}
.submit {
float: right;
margin-right: 1.5vw;
}
.submit a {
color: white;
border-radius: 5px;
}
.navimg img {
max-width: 100%;
max-height: 20%;
}
.navimgdiv {
height: 1.5vh;
}
/* navbar end */
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="pgallerystyles.css">
<title> Photo Gallery </title>
<link rel="shortcut icon" href="logo.ico">
</head>
<body>
<div class="fullwidth">
</div>
<nav>
<ul class="navul">
<li>
<div class="navimgdiv"><img class="navimg" src="logo.svg"></div>Lumastock</li>
<li>Photos</li>
<li>Featured</li>
<li>Contact</li>
<li>Pricing</li>
<li>Assesment Requirements</li>
<li class="submit">Submit a photo</li>
</ul>
</nav>
<header>
</header>
<h1 class="headertitle">Image Gallery</h1>
Thanks!
Simply use the logo outside of the list. I have added max-width for logo image. Optionally padding and margin you can customize based on your requirement. I hope this solution will be helpful.
.heading {
display: inline-block;
font-family: "Montserrat";
font-weight: lighter;
text-align: left;
margin-left: 20vw;
line-height: 30vw;
}
body {
width: 100%;
margin: auto;
font-family: 'Montserrat', sans-serif;
background-color: white;
}
.container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
margin-top: 30px;
flex-flow: row wrap;
margin-top: -10vw;
}
img {
/* margin: 9px;
transition: filter 0.2s;
filter: brightness(100%);
display: inline-block;
min-height: 100px;
height: 50vh; */
max-width: 100%;
}
img:hover {
filter: brightness(80%);
}
.responsive:hover {}
header {
position: relative;
height: 50vh;
background-image: linear-gradient(rgb(50, 50, 50), rgb(30, 30, 30));
margin-top: -20px;
transform: skewY(-5deg);
transform-origin: top left;
}
.fullwidth {
width: 100%;
}
.headertitle {
margin-top: -36vh;
margin-left: 12vw;
position: absolute;
font-size: calc(13px + 2.5vw);
color: white;
font-family: 'Montserrat';
font-weight: lighter;
}
/* navbar */
nav {
background: rgb(52, 52, 52);
position: relative;
z-index: 1;
height: calc(40px + 6vh);
box-shadow: 0 3px 3px -1px rgba(0, 0, 0, 0.065);
overflow: auto;
width: 100vw;
display: flex;
}
nav ul {
margin: 0;
padding: 0;
text-align: left;
margin-left: 1.2vw;
}
nav ul li {
display: inline-block;
list-style: none;
font-size: 1.2em;
padding: 1vh;
}
.navul a {
text-decoration: none;
color: white;
line-height: 5.5vh;
height: 5.5vh;
font-size: calc(15px + 0.25vh + 0.15vw);
}
.navuul a:visited,
a:link,
a:active {
text-decoration: none;
color: white;
font-weight: 200;
line-height: 5.5vh;
height: 5.5vh;
}
.navuul a:hover {
text-decoration: none;
color: grey;
font-weight: 200;
line-height: 5.5vh;
height: 5.5vh;
}
.submit {
float: right;
margin-right: 1.5vw;
}
.submit a {
color: white;
border-radius: 5px;
}
.navimgdiv img {
max-width: 50px;
}
.navimgdiv {
padding: 5px 0;
}
<div class="fullwidth"></div>
<nav>
<a class="navimgdiv"><img src="https://cdn.worldvectorlogo.com/logos/react.svg"></a>
<ul class="navul">
<li>Lumastock</li>
<li>Photos</li>
<li>Featured</li>
<li>Contact</li>
<li>Pricing</li>
<li>Assesment Requirements</li>
<li class="submit">Submit a photo</li>
</ul>
</nav>
<header></header>
<h1 class="headertitle">Image Gallery</h1>
I've created This box, but i can't set it's content to stretch accordingly to it's height... once the view is stretched to height - the content is still fixed...and not spread evenly...I've tried to set padding with percentage to the LI - but it's not
working....is there a way to set it only with CSS?
.cont {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: space-between;
}
.box {
width: 40vw;
height: 50vh;
}
.row_wrapper {
display: flex;
flex-direction: column;
background-color: grey;
border-radius: 5px;
overflow: hidden;
width: 100%;
height: 100%;
}
.flex-row {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 0px 0px 0px 0px;
margin: 0px;
}
.flex-outer {
width: 100%;
padding: 0px 0px 0px 0px;
margin: 0px;
}
.flex-row li {
width: 50%;
/* padding-right: 10px; */
}
.flex-outer li {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
padding-bottom: 5px;
}
.select {
width: 100%;
border-radius: 5px;
border: 1px solid #dcdcdc;
padding: 5%;
font-size: 0.7vw;
}
.parameters_btn {
border: none;
background-color: #49c8c1;
border-radius: 0.5vw;
font-size: 0.9vw;
padding: 1% 5% 2% 5%;
color: #fff;
outline: none;
width: 50%;
height: 20%;
}
.parameters_btn:hover {
background-color: #40afa9;
outline: none;
}
.parameters_btn:active {
background-color: #2d7c78;
outline: none;
}
.user_box_header {
background-color: #fff;
min-height: 20%;
align-items: center;
justify-content: start;
display: flex;
padding-left: 15px;
border-bottom: 1px solid #e9e9e9;
}
.user_box_header span {
font-size: 0.8vw;
color: #3f4760;
font-family: 'Montserrat Bold', sans-serif;
font-weight: 600;
}
.user_box_header i:before {
padding-right: 0.5vw;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: #49c8c1;
font-size: 18px;
}
.user_notifications i:before {
content: "\f0a2";
}
.user_box_cont {
min-height: 80%;
padding: 5px 10px 5px 10px;
}
.material-switch {
width: 100%;
}
.material-switch>input[type="checkbox"] {
display: none;
}
.material-switch>label {
cursor: pointer;
height: 0px;
position: relative;
width: 40px;
}
.material-switch>input[type="checkbox"]+label::before {
content: "\f222";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: #333333;
text-align: right;
border: 1px solid #dcdcdc;
padding-left: 10px;
padding-right: 10px;
font-size: 1vw;
}
.material-switch>label::before {
background-color: #f6f6f6;
border-radius: 50px;
height: 2.5vh;
margin-top: -12px;
position: absolute;
width: 8vw;
}
.material-switch>label::after {
/*--button---*/
content: "";
font-size: 1vw;
background-color: #fff;
border-radius: 50px;
height: 2.5vh;
left: -4px;
margin-top: -8px;
position: absolute;
top: -4px;
width: 6vw;
border: 1px solid #dcdcdc;
}
.material-switch>input[type="checkbox"]:checked+label::before {
background-color: #f6f6f6;
content: "\f221";
font-family: FontAwesome;
text-align: left;
font-size: 1vw;
}
.material-switch>input[type="checkbox"]:checked+label::after {
background-color: #fff;
left: 30px;
}
.femme {
display: none;
}
.material-switch>input[type="checkbox"]:checked+label>span.homme {
display: none;
}
.material-switch>input[type="checkbox"]:checked+label>span.femme {
display: block;
top: -8px;
}
.homme,
.femme {
font-family: 'Roboto Light', sans-serif;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: #5d5d5d;
font-size: 0.7vw;
position: absolute;
top: -10px;
z-index: 999;
}
.material-switch>input[type="checkbox"]:checked+label .homme,
.material-switch>input[type="checkbox"]:checked+label .femme {
left: 43px;
}
.homme::before {
content: "\f222";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: #49c8c1;
margin-right: 5px;
}
.femme::before {
content: "\f221";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: #49c8c1;
margin-right: 5px;
}
<div class="cont">
<div class="box">
<div class="row_wrapper">
<div class="user_box_header user_notifications"><i></i>
<p>NOTIFICATIONS</p>
</div>
<div class="user_box_cont">
<ul class="flex-outer">
<li>
<ul class="flex-row">
<li>
<p>Select 3</p>
<select class="params_select">
<option>822-0123-56789</option>
<option>822-0123-56789</option>
<option>822-0123-56789</option>
</select>
</li>
<li>
<p>Select 4</p>
<select class="params_select">
<option>Jean-Luc BÉNAZET</option>
<option>Jean-Luc BÉNAZET</option>
<option>Jean-Luc BÉNAZET</option>
</select>
</li>
</ul>
<li>
</li>
</ul>
<ul class="flex-outer">
<li>
<ul class="flex-row">
<li>
<p>Select 3</p>
<select class="params_select">
<option>822-0123-56789</option>
<option>822-0123-56789</option>
<option>822-0123-56789</option>
</select>
</li>
<li>
<p>Select 4</p>
<select class="params_select">
<option>Jean-Luc BÉNAZET</option>
<option>Jean-Luc BÉNAZET</option>
<option>Jean-Luc BÉNAZET</option>
</select>
</li>
</ul>
<li>
<button class="parameters_btn">
Send
</button>
</li>
</ul>
</div>
</div>
</div>
</div>
To fit the content in the div you must not set the height fixed, use height:auto; you can add max-height and max width, also min-width, min-height.
it's because of your row wrappers height is static ,change its style like code below
.row_wrapper {
display: flex;
flex-direction: column;
background-color: grey;
border-radius: 5px;
overflow: hidden;
width: 100%;
height: auto;
}
It might happen because of your .box height is statically 50vh. If you can change it to auto may give desired output.
Find updated fiddler here. Hope it helps.