I currently have a problem with my header. At the moment I have a skewed gradient as my header background image. Whenever I try to place a navbar above this header I can't see it no matter which design I use. Can someone please tell me how to make a navbar go above this header?
Thanks
Image: Site with working images
Code:
#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 {
}
header {
position: relative;
height: 80vh;
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: -45vh;
margin-left: 12vw;
position: absolute;
font-size: calc(13px + 2.5vw);
color: white;
font-family: 'Montserrat';
font-weight: lighter;
}
/* navbar */
/* navbar end */
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="pgallerystyles.css">
<title> Photo Gallery </title>
</head>
<body>
<div class="fullwidth">
</div>
<header>
</header>
<h1 class="headertitle">Image Gallery</h1>
</div>
<main class="site-wrapper">
<div class="container">
<div class="responsive"><img src="img4.jpg"></div>
<div class="responsive"><img src="img1.jpg"></div>
<div class="responsive"><img src="img2.jpg"></div>
<div class="responsive"><img src="img3.jpg"></div>
<div class="responsive"><img src="img6.jpg"></div>
<div class="responsive"><img src="img5.jpg"></div>
<div class="responsive"><img src="img7.jpg"></div>
<div class="responsive"><img src="img9.jpg"></div>
</div>
</main>
</body>
</html>
You need to have a z-index property on your <nav> with a colored background to make it visible, and to do so, the <nav> has to have a different display value (i.e. Relative, Absolute, ... etc.) rather than the default static value.
Check this out:
#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 {}
header {
position: relative;
height: 80vh;
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: -45vh;
margin-left: 12vw;
position: absolute;
font-size: calc(13px + 2.5vw);
color: white;
font-family: 'Montserrat';
font-weight: lighter;
}
/* navbar */
nav {
background: #fff;
position: relative;
z-index: 1;
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
list-style: none
}
/* navbar end */
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="pgallerystyles.css">
<title> Photo Gallery </title>
</head>
<body>
<div class="fullwidth">
</div>
<nav>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</nav>
<header>
</header>
<h1 class="headertitle">Image Gallery</h1>
<main class="site-wrapper">
<div class="container">
<div class="responsive"><img src="img4.jpg"></div>
<div class="responsive"><img src="img1.jpg"></div>
<div class="responsive"><img src="img2.jpg"></div>
<div class="responsive"><img src="img3.jpg"></div>
<div class="responsive"><img src="img6.jpg"></div>
<div class="responsive"><img src="img5.jpg"></div>
<div class="responsive"><img src="img7.jpg"></div>
<div class="responsive"><img src="img9.jpg"></div>
</div>
</main>
</body>
</html>
Related
I want to achieve this desktop design.
The mobile design has been completed but when I try changing the mobile design to desktop design, I am using a specific flex property row-reverse. When I use the row-reverse property the result looks like this
I am unable to figure out how to fix the position to achieve the desktop design and have been stuck on this problem for the past few days.
Could someone please tell me what am i doing wrong and how do i fix this issue.
#import url('css-reset.css');
#import url('https://fonts.googleapis.com/css2?family=Inter:wght#400;700&family=Lexend+Deca&display=swap');
:root {
--color-main-background: hsl(233, 47%, 7%);
--color-card-background: hsl(244, 38%, 16%);
--color-soft-voilet: hsl(277, 64%, 61%);
--color-white-main: hsl(0, 0%, 100%);
--color-white-paragraph: hsla(0, 0%, 100%, 0.75);
--color-white-stats: hsla(0, 0%, 100%, 0.6);
--font-weight-four: 400;
--font-weight-seven: 700;
}
body {
background-color: var(--color-main-background);
font-weight: var(--font-weight-four);
color: var(--color-white-main);
margin: 0;
}
.container {
display: grid;
grid-auto-flow: row;
border-radius: 10px;
justify-content: center;
text-align: center;
align-self: center;
max-width: 350px;
min-height: 750px;
margin-top: 30px;
margin-left: auto;
margin-right: auto;
/* padding: 0 2rem; */
background-color: var(--color-card-background);
overflow: hidden;
}
/* .main-img {
width: 100%;
max-height: 100%;
object-fit: cover;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
} */
picture>* {
width: 100%;
max-height: 100%;
object-fit: cover;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.img-component {
position: relative;
}
.img-component::after {
position: absolute;
content: '';
height: 100%;
width: 100%;
top: 0;
left: 0;
background-color: hsl(277, 64%, 61%, 0.5);
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.main-header {
font-family: 'Lexend Deca',
sans-serif;
font-weight: var(--font-weight-seven);
font-size: 1.5rem;
color: var(--color-white-main);
margin-top: 20px;
}
.insight {
color: var(--color-soft-voilet)
}
.h1-first,
.h1-second {
display: block;
}
.stats,
.heading {
display: block;
}
.paragraph {
margin-top: 5px;
margin-bottom: 30px;
}
.para-1,
.para-2,
.para-3,
.para-4 {
font-family: 'Inter',
sans-serif;
font-weight: var(--font-weight-four);
font-size: 0.875rem;
color: var(--color-white-paragraph);
display: block;
line-height: 1.75;
}
.stats {
color: var(--color-white-main);
font-family: 'Inter', sans-serif;
font-weight: var(--font-weight-seven);
font-size: 1.25rem;
margin-top: 10px;
}
.heading {
font-family: 'Inter',
sans-serif;
font-weight: var(--font-weight-four);
font-size: 0.7rem;
color: var(--color-white-stats);
margin-bottom: 20px;
}
#media (min-width:768px) {
body {
display: flex;
align-items: center;
justify-content: center;
}
.container {
display: flex;
flex-direction: row-reverse;
min-height: 400px;
max-width: 50rem;
overflow: hidden;
}
picutre {
max-width: 100%;
max-height: 100%;
}
picture>* {
width: 100%;
height: 400px;
border-top-left-radius: 0px;
}
.img-component {
position: relative;
}
.img-component::after {
position: absolute;
content: '';
height: 100%;
width: 100%;
top: 0;
left: 0;
background-color: hsl(277, 64%, 61%, 0.5);
border-top-left-radius: 0px;
border-top-right-radius: 10px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="styles/style.css">
<title>Frontend Mentor | Stats preview card component</title>
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
<style>
</style>
</head>
<body>
<div class="container">
<div class="img-component">
<picture>
<source media="(min-width: 768px)" srcset="/images/image-header-desktop.jpg">
<source media="(min-width: 100px)" srcset="/images/image-header-mobile.jpg">
<img class="main-img" src="/images/image-header-mobile.jpg" alt="main image">
</picture>
</div>
<div class="main-header">
<h1><span class="h1-main"> Get <span class="insight">insights</span> that</span>
<span class="h1-first">help your business</span>
<span class="h1-second"> grow.</span></h1>
</div>
<div class="paragraph">
<p>
<span class="para-1"> Discover the benefits of data</span>
<span class="para-2">analytics and make better decisions</span>
<span class="para-3">regarding revenue, customer</span>
<span class="para-4">experience, and overall efficiency.</span>
</p>
</div>
<div class="stat-heading">
<span class="stats">10k+</span>
<span class="heading">COMPANIES</span>
<span class="stats">314</span>
<span class="heading">TEMPLATES</span>
<span class="stats">12M+</span>
<span class="heading">QUERIES</span>
</div>
</div>
</body>
</html>
Hope this will help to restructure your section.
I basically tried to roughly replicate your design using a slightly different approach:
So given the main div (container), let's split it in half creating 2 child div into it, aligning them with d-flex applied to the container.
Into the left one, let's create 2 other divs: one which will contain the header and paragraph and the other which will contain the 3 stats and heading. I will then suggest to wrap each stats and heading into they own div, this will help you to correctly align them on desktop and mobile using d-flex, and related flex-directions.
html,
body {
height: 100%;
}
div {
border: 2px solid red
}
.container {
display: flex;
align-items: center;
}
.box-left {
width: 50%;
background-color: blueviolet;
height: 500px;
display: flex;
flex-direction: column;
justify-content: center;
}
.box-right {
width: 50%;
background-color: brown;
height: 500px;
width: 50%;
background-image: url(https://images.pexels.com/photos/3184360/pexels-photo-3184360.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);
background-size: cover;
}
.box-bottom {
display: flex;
justify-content: space-between;
}
.text-wrapper {
padding: 50px;
}
#media (max-width:768px) {
.container {
flex-direction: column-reverse;
}
.box-left,
.box-right {
width: 100%;
}
.box-left {
text-align: center;
}
.box-bottom {
display: flex;
flex-direction: column;
justify-content: center;
}
}
<body>
<div class="container">
<div class="box-left">
<div class="text-wrapper">
<div>
<h1>Your title here</h1>
<p>It is a long established fact that a reader will be distracted by the readable content of a page
when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal
distribution of letters, as opposed to using 'Content here, content here', making it look like
readable English.</p>
</div>
<div class="box-bottom">
<div>
<h2>10k</h2>
<p>SOMETHING</p>
</div>
<div>
<h2>10k</h2>
<p>SOMETHING</p>
</div>
<div>
<h2>10k</h2>
<p>SOMETHING</p>
</div>
</div>
</div>
</div>
<div class="box-right">
</div>
</div>
</body>
This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Closed 5 months ago.
I am having trouble. There is a whitespace between the two pages of content. Also I have tried applying margin: auto; and text-align: center; but to no avail I don't know what to do. Also what other things are wrong with the way I implemented my design?
Also I tried to add a gray border around the avatar so that it fits into the navbar but stays exactly where it is.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, intial-scale=1.0"/>
<title>Johnson's Personal Portfolio</title>
</head>
<body>
<nav id="navbar">
<div class="avatar">
<img alt="LordYamanouchi" src="https://avatars.githubusercontent.com/u/20011297?v=3"/>
</div>
<ul>
<li>Alias</li>
<li>About</li>
<li><a href="#">Contacts<a/></li>
<li>Works</li>
</ul>
</nav>
<header id="welcomesection">
<div id="welcome-section">
<h1>
Welcome to Johnson Oluwaseun Adeleke's
</h1>
<h1>
<>Portfolio Page<>
</h1>
<p style="color: blue"><i>I am an aspiring Web Developer</i></p>
</div>
</header>
<section id="projects">
<h2>Here are some of my Projects</h2>
<p></p>
</section>
</body>
</html>
body{
width: 100%;
height: 100%;
margin: 0;
}
#navbar li, a{
list-style-type: none;
display: inline-block;
padding: 4px;
float: right;
color: black; font-weight: normal;
font-style: Helvetica, sans-serif;
font-size: 15px;
vertical-align: center;
}
nav{
width: 100%;
display:block;
background-color:red;
position: fixed;
height: 50px;
top: 0;
left: 0;
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
}
#welcomesection{
float: clear;
display: flex;
align-items: center;
width: 100%;
height: 120vh;
text-align: center;
background-color: teal;
z-index: 1;
}
h1{
margin: auto;
}
#welcomesection p{
text-align: center;
}
.avatar img{
width: auto;
height: 50px;
float: left;
left: 15px;
top: 0;
padding: 15px solid grey;
}
#projects{
width: 100%;
height: 150vh;
background-color:blue;
}
#projects h2{
text-decoration: underline;
text-align: center;
}
Is the h2 margin you can remove it and add a padding
body {
width: 100%;
height: 100%;
margin: 0;
}
#navbar li,
a {
list-style-type: none;
display: inline-block;
padding: 4px;
float: right;
color: black;
font-weight: normal;
font-style: Helvetica, sans-serif;
font-size: 15px;
vertical-align: center;
}
nav {
width: 100%;
display: block;
background-color: red;
position: fixed;
height: 50px;
top: 0;
left: 0;
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
}
#welcomesection {
float: clear;
display: flex;
align-items: center;
width: 100%;
height: 120vh;
text-align: center;
background-color: teal;
z-index: 1;
}
h1 {
margin: auto;
}
#welcomesection p {
text-align: center;
}
.avatar img {
width: auto;
height: 50px;
float: left;
left: 15px;
top: 0;
padding: 15px solid grey;
}
#projects {
width: 100%;
height: 150vh;
background-color: blue;
}
#projects h2 {
text-decoration: underline;
text-align: center;
margin-top: 0;
padding-top: 20px;
}
<nav id="navbar">
<div class="avatar">
<img alt="LordYamanouchi" src="https://avatars.githubusercontent.com/u/20011297?v=3" />
</div>
<ul>
<li>Alias</li>
<li>About</li>
<li><a href="#">Contacts<a/></li>
<li>Works</li>
</ul>
</nav>
<header id="welcomesection">
<div id="welcome-section">
<h1>
Welcome to Johnson Oluwaseun Adeleke's
</h1>
<h1>
<>Portfolio Page
<>
</h1>
<p style="color: blue"><i>I am an aspiring Web Developer</i></p>
</div>
</header>
<section id="projects">
<h2>Here are some of my Projects</h2>
<p></p>
</section>
I have currently added a navigation bar to a webpage I'm coding. The problem is, the links within the bar are unresponsive. I'm pretty sure it has to do with the display: flex;
in the CSS for the nav links; however, I can't get rid of it as I need the nav links to be in a straight line. This is what it currently looks like (image) . I have a navigation bar with a link in the home button but the link isn't responsive. When I take out the display: flex;, the link becomes responsive however the list ends up looking like this (image). They become stacked one atop the other. I would really appreciate it if someone could take a look at my code and point me in the right direction
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.title {
height: 20vh;
display: flex;
justify-content: center;
align-items: center;
position: relative;
top: -60px;
left: 400px;
}
.image-container {
height: 768px;
width: 768px;
border: 10px solid black;
position: relative;
top: -165px;
}
.image-container img {
width: 100%;
height: 100%;
}
.transition-image {
position: absolute;
top: 0px;
left: 0px;
opacity: 0;
transition: opacity 0.5s ease;
}
.transition-image:hover {
opacity: 1;
}
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: #5d4954;
font-family: 'Poppins', sans-serif;
}
.logo {
color: rgb(226, 226, 226);
text-transform: uppercase;
letter-spacing: 5px;
font-size: 20px;
}
.nav-links {
display: flex;
justify-content: space-around;
width: 30%;
}
.nav-links li {
list-style: none;
}
.nav-links a {
color: rgb(226, 226, 226);
text-decoration: none;
letter-spacing: 3px;
font-weight: bold;
font-size: 14px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="./styles.css">
<title>Document</title>
</head>
<body>
<nav>
<div class="logo">
<h4>[Ayanfe]:)</h4>
</div>
<ul class="nav-links">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Next</li>
</ul>
</nav>
<h1 class="title">Example Text</h1>
<div class="image-container">
<img src="./Images/Image.jpg" alt="">
<img class="transition-image" src="./Images/Gif.gif" alt="">
</div>
</body>
</html>
My background image won't show up in the div I want to display in. However, it shows up if I put it in other elements. For example, I put it in the body element and it showed up just fine, but it won't display in the div I want it to. Can you check my code and see what I'm doing wrong. I double checked my file path and also the file type, and it's all fine. So, I'm not being able to figure out what I'm doing wrong.
HTML:
<body>
<header>
<div class = "container container-flex">
<div class = "title">
<h1>PRODUCE</h1>
</div>
<nav>
<ul>
<li>Home</li>
<li>Groups</li>
<li>Profiles</li>
<li>Gallery</li>
</ul>
</nav>
</div>
</header>
<div class = "container container-flex">
<main role = "main">
<div class = "image">
</div>
</main>
</div>
</body>
CSS:
body{
margin: 0;
font-size: 1.125rem;
font-weight: 400;
}
.container{
width: 90%;
max-width: 900px;
margin: 0 auto;
}
.container-flex{
display: flex;
flex-direction: column;
justify-content: space-between;
}
header{
padding: 1em 0;
text-align: center;
}
#media (min-width: 675px){
.container-flex{
flex-direction: row;
}
}
nav ul{
list-style: none;
padding: 0;
display: flex;
justify-content: center;
}
nav li{
margin-left: 2em;
}
nav a{
text-decoration: none;
padding: .25em 0;
font-family: 'Ubuntu', sans-serif;
color: black;
font-size: 1.3rem;
color: #575252;
}
h1{
font-size: 2.75rem;
margin: 0.1em;
font-family: 'Merriweather', serif;
color: #FF344B;
}
#media (max-width: 675px){
nav ul{
flex-direction: column;
}
nav li{
margin: .5em 0;
}
}
.image{
background-image: url('logo.jpg');
}
This is because you are trying set background image in an empty element, which has 0 height.
Set specific width/height of the element.
body{
margin: 0;
font-size: 1.125rem;
font-weight: 400;
}
.container{
width: 90%;
max-width: 900px;
margin: 0 auto;
}
.container-flex{
display: flex;
flex-direction: column;
justify-content: space-between;
}
header{
padding: 1em 0;
text-align: center;
}
#media (min-width: 675px){
.container-flex{
flex-direction: row;
}
}
nav ul{
list-style: none;
padding: 0;
display: flex;
justify-content: center;
}
nav li{
margin-left: 2em;
}
nav a{
text-decoration: none;
padding: .25em 0;
font-family: 'Ubuntu', sans-serif;
color: black;
font-size: 1.3rem;
color: #575252;
}
h1{
font-size: 2.75rem;
margin: 0.1em;
font-family: 'Merriweather', serif;
color: #FF344B;
}
#media (max-width: 675px){
nav ul{
flex-direction: column;
}
nav li{
margin: .5em 0;
}
}
.image{
background-image: url('https://lh3.googleusercontent.com/taykG37GWDgY-FGkdogDvsHSJMUGRMvkuVRT6yR-5UNkKvGRKeRlpGYXlslocOcS0txlfUdGW59JGtzADknxbMqnh6AtVCv9EXyB8nHp80YsRNA0Yw=w1024-h683-n-l50-sg-rj');
height: 10em;
background-size: contain;
background-repeat: no-repeat;
}
<header>
<div class = "container container-flex">
<div class = "title">
<h1>PRODUCE</h1>
</div>
<nav>
<ul>
<li>Home</li>
<li>Groups</li>
<li>Profiles</li>
<li>Gallery</li>
</ul>
</nav>
</div>
</header>
<div class = "container container-flex">
<main role = "main">
<div class = "image">
</div>
</main>
</div>
Your div has no content. Either give some content or if that does not agree with your current design, give explicit height and width.
.image{
width: 200px;
height: 200px;
background-image : url('https://image.shutterstock.com/image-vector/sample-stamp-grunge-texture-vector-260nw-1389188336.jpg');
}
.image2{
background-image : url('https://image.shutterstock.com/image-vector/sample-stamp-grunge-texture-vector-260nw-1389188336.jpg');
}
<div class="image"></div>
<div class="image2"></div>
You need to add width, height, and background-size properties to the .image.
body {
margin: 0;
font-size: 1.125rem;
font-weight: 400;
min-height: 100vh;
}
.container {
width: 90%;
max-width: 900px;
margin: 0 auto;
}
.container-flex {
display: flex;
flex-direction: column;
justify-content: space-between;
}
header {
padding: 1em 0;
text-align: center;
}
#media (min-width: 675px) {
.container-flex {
flex-direction: row;
}
}
nav ul {
list-style: none;
padding: 0;
display: flex;
justify-content: center;
}
nav li {
margin-left: 2em;
}
nav a {
text-decoration: none;
padding: .25em 0;
font-family: 'Ubuntu', sans-serif;
color: black;
font-size: 1.3rem;
color: #575252;
}
h1 {
font-size: 2.75rem;
margin: 0.1em;
font-family: 'Merriweather', serif;
color: #FF344B;
}
#media (max-width: 675px) {
nav ul {
flex-direction: column;
}
nav li {
margin: .5em 0;
}
}
.container:nth-child(2){
height: 250px; /* set the height here */
}
main{
width: 100%;
height: 100%;
}
.image {
height: 30%;
width: 30%;
background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/0/00/Disk_pack1.svg/1200px-Disk_pack1.svg.png');
background-size: cover;
}
<body>
<header>
<div class="container container-flex">
<div class="title">
<h1>PRODUCE</h1>
</div>
<nav>
<ul>
<li>Home</li>
<li>Groups</li>
<li>Profiles</li>
<li>Gallery</li>
</ul>
</nav>
</div>
</header>
<div class="container container-flex">
<main role="main">
<div class="image">
</div>
</main>
</div>
</body>
Edit: You need to set the height on the second .container class. Because of no height, the relative units didn't work. Also, you need to set the height and width on parent (main) element of .image.
in your code if you setting an image in div tag it is should have a height and weight. This is another way to add images in your application with responsive.
body{
margin: 0;
font-size: 1.125rem;
font-weight: 400;
}
.container{
width: 90%;
max-width: 900px;
margin: 0 auto;
}
.container-flex{
display: flex;
flex-direction: column;
justify-content: space-between;
}
header{
padding: 1em 0;
text-align: center;
}
#media (min-width: 675px){
.container-flex{
flex-direction: row;
}
}
nav ul{
list-style: none;
padding: 0;
display: flex;
justify-content: center;
}
nav li{
margin-left: 2em;
}
nav a{
text-decoration: none;
padding: .25em 0;
font-family: 'Ubuntu', sans-serif;
color: black;
font-size: 1.3rem;
color: #575252;
}
h1{
font-size: 2.75rem;
margin: 0.1em;
font-family: 'Merriweather', serif;
color: #FF344B;
}
#media (max-width: 675px){
nav ul{
flex-direction: column;
}
nav li{
margin: .5em 0;
}
}
.image img{
width: 100%;
height: auto;
}
<html lang="en">
<head>
<meta charset="utf-8">
<title>Page Title Goes Here</title>
<meta name="description" content="Description Goes Here">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class = "container container-flex">
<div class = "title">
<h1>PRODUCE</h1>
</div>
<nav>
<ul>
<li>Home</li>
<li>Groups</li>
<li>Profiles</li>
<li>Gallery</li>
</ul>
</nav>
</div>
</header>
<div class = "container container-flex">
<main role = "main">
<div class = "image">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png" alt="Smiley face">
</div>
</main>
</div>
<script src="js/scripts.js"></script>
</body>
</html>
As mentioned in answers by other users, your div element is empty and will sit on your page with effectively height: 0px; and width: 0px; properties.
To combat this, you should add a width property to your .image div in your stylesheets.
You can either then control the height of the image div with the height property, or alternatively you could use padding-bottom to give a more responsive twist to your styling, since padding-bottom: x% is a percentage of the element's width.
For example, adding:
.image {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
padding-bottom: 100%;
width: 100%;
}
would create a square image that will stay responsively square as the page width, and therefore the width of the div.iamge element shrinks. The padding value can be played around with to get the right height for the element that you desire.
UPDATE
body{
margin: 0;
font-size: 1.125rem;
font-weight: 400;
}
.container{
background-color: red;
width: 90%;
max-width: 900px;
margin: 0 auto;
}
.container-flex{
display: flex;
flex-direction: column;
justify-content: space-between;
}
.image-wrapper {
width: 75%;
}
.image {
background-color: green;
height: 0;
padding-bottom: 100%;
}
.container {
color: white;
padding-bottom: 16px;
}
.center-image {
margin: 0 auto;
}
<body>
<header>
</header>
<div class="container">
container
<main role="main">
<div class="image-wrapper center-image">
<div class="image">
<span>image</span>
</div>
</div>
</main>
</div>
</body>
I'm sure I have made some kind of really obvious stupid mistake here but it's been bugging me for a while now and I just cannot figure it out no matter where I look.. I am just practicing with a very basic, boring site and I need the image to be responsive in the section underneath the header, but for some reason no matter what I do, I just can't get it to work.
Sorry if this has been answered, I had a look and couldn't find anything exactly the same. If anyone could shed some light on this for me I would be very appreciative. Thanks in advance.
HTML:
<html>
<body>
<header>
<div class="container">
<div class="brand">
<img class="brandImg" src="https://photos-1.dropbox.com/t/2/AACo_XuN80WW6m3RltLuUDD-Koivyw205OCV55h43hevVQ/12/184045382/png/32x32/1/_/1/2/network.png/EKPi4YsBGMICIAIoAg/u6N5dEYvNDRNysVhT6Arx-eKOa64tOkilzRp8K3e93Y?preserve_transparency=1&size=1600x1200&size_mode=3" alt="Brand Image">
<h3 class="mainTitle">Network Solutions</h3>
</div>
<nav>
<ul class="navBar">
<li>About |</li>
<li>Portfolio |</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
<section id="showcase">
<div class="heroImg">
<div class="container">
</div>
</div>
</section>
</body>
</html>
CSS:
/* MAIN STYLES */
.container {
max-width: 60%;
margin: 0 auto;
}
/* HEADER */
header {
height: 100px;
border-bottom: 2px solid black;
border-top: 2px solid black;
}
.brand {
float: left;
display: inline;
margin-top: 20px;
}
.brandImg {
height: 4em;
width: 4em;
float: left;
margin-bottom: 5px;
}
.mainTitle {
font-family: 'IBM Plex Mono', monospace;
line-height: 1.2em;
position: relative;
left:8px;
top: -5px;
}
/* MAIN NAVIGATION */
ul {
float: right;
}
li {
margin-top: 15px;
float: left;
display: inline;
font-size: 40px;
padding-left: 15px;
}
a {
color: #000;
text-decoration: none;
}
a:hover {
color: gray;
}
/* HERO SECTION */
#showcase {
width: 100%;
height: 100%;
}
.heroImg {
background-image: url("https://photos-1.dropbox.com/t/2/AADgiVKPX---q_yzz3R6QXjMuvUF9x1suRGMjLMV8QkZVQ/12/184045382/jpeg/32x32/1/_/1/2/hero.jpeg/EKPi4YsBGMICIAIoAg/-UTK8zUqda_wA3F-VrZAdIZvo84OHHGWCbLEcdCi1K8?size=1600x1200&size_mode=3");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
Codepen link
The logo image in your pen is throwing a 403 error. Generally speaking, you can make an image responsive with the following CSS:
img {
display: inline-block;
max-width: 50px; /* Width of your image */
max-height: 50px; /* Height of your image */
width: 100%;
height: auto;
}
Here is a JSFiddle example. Drag the window to see how the image reacts.
img {
display: inline-block;
max-width: 650px;
max-height: 250px;
width: 100%;
height: auto;
}
<img src="http://via.placeholder.com/650x250" alt="Stack Overflow Test Image" />
Here's another example using Flexbox making the image responsive relative to another element:
#test {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
img {
display: inline-block;
max-width: 250px;
max-height: 150px;
width: 100%;
height: auto;
}
h1 {
margin-left: 15px;
-webkit-flex: none;
-ms-flex: none;
flex: none;
}
<div id="test">
<div id="logo">
<img src="http://via.placeholder.com/250x150" alt="Stack Overflow Test Image" />
</div>
<h1>This is a Test Title</h1>
</div>