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>
Related
I'm trying to align the Modern Art Gallery and the text using flexbox but when I do that the whole container moves left and right. Even more so I want to change the width of the h1 but I'm not sure how to do that.
Some code may be missing as I'm working on multiple devices but I only need help with the desktop version which is what's shown.
Here's what I want it to look like:
.container-content {
border: 2px solid blue;
position: relative;
display: flex;
justify-content: space-between;
gap: 2rem;
}
.container-content h1 {
font-size: 96px;
padding: 0;
}
#tablet-img {
display: none;
}
#desktop-img {
display: block;
background-color: grey;
padding-left: 450px;
}
.desktop-text-button {
border: 2px solid red;
position: absolute;
margin-left: 1%;
}
}
<div class="container-flex">
<img id="desktop-img" src="../art-gallery-website/starter-code/assets/desktop/image-hero.jpg" alt="desktop-image">
<div class="container">
<div class="container-content">
<h1>MODERN ART GALLERY</h1>
<div class="desktop-text-button">
<p>The arts in the collection of the Modern Art Gallery all started from a spark of inspiration. Will these pieces inspire you? Visit us and find out.</p>
<div class="button-1">
<button>Our Location</button>
<span class="right-arrow"></span>
</div>
</div>
</div>
</div>
</div>
Your code was messy so I just recoded it. Is this what you want?
.wrapper {
display: flex;
flex-direction: row;
width: 100%;
height: 90vh;
}
.wrapper .left {
width: 70%;
height: 100%;
background-image: url('https://wallpaperaccess.com/full/4707236.jpg');
background-size: cover;
border: 1.2px solid #000000;
}
.wrapper .left p {
font-size: 6vw;
font-weight: 700;
margin-top: 15%;
margin-left: 10%;
color: #ffffff;
}
.wrapper .left p span {
color: #000000;
}
.wrapper .right {
display: flex;
flex-direction: column;
column-gap: 2vh;
position: relative;
right: 7%;
width: 30%;
height: 40%;
margin-top: 10%;
}
.wrapper .right p {
font-size: 2vw;
}
.wrapper .right button {
font-size: 1.6vw;
width: 45%;
margin-left: auto;
margin-right: auto;
}
<div class="wrapper">
<div class="left">
<p>MODERN <br /> ART GAL<span>LERY</span></p>
</div>
<div class="right">
<p>The arts in the collection of the Modern Art Gallery all started from a spark of inspiration. Will these pieces inspire you? Visit us and find out.</p>
<button>OUR LOCATION</button>
</div>
</div>
My header should be fixed on the page so i couldn't use float:right;. I'm %150 newbie around here. Logo should be on right side of the navbar and also responsive. I tried margin, float and other flex properties. I'm just going to be mad. Where is the mistake.
#import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');
body {
margin: 0;
font-family: 'Trebuchet MS', sans-serif;
background-color: #efefef;
}
.wrapper {
position: relative;
}
.header-logo {
width: 20vw;
height: 20vw;
}
header {
width: 100%;
height: 4rem;
background: #609F92;
position: fixed;
display: flex;
font-family: Oswald, sans-serif;
font-size: 1.5rem;
}
#header-img {
width: 100%;
height: 100%;
border-radius: 50%;
box-shadow: 1px 1px 2px 1px;
}
#nav-bar {
display: flex;
flex-direction: row;
}
#nav-bar ul {
display: flex;
flex-direction: row;
align-items: center;
list-style: none;
}
#nav-bar li {
margin: 10px;
}
<div class="wrapper">
<header id="header">
<nav id="nav-bar">
<ul>
<li>Features</li>
<li>About Us</li>
<li>Contact</li>
</ul>
<div class="header-logo">
<img id="header-img" src="https://thumbnails-photos.amazon.com/v1/thumbnail/lFJOXJpuTKGgtJYa9-wScA?viewBox=943%2C943&ownerId=A4PYAHHROL8LR&groupShareToken=OSTx_M1GRRS1y_rPWtVfGA.8mpQdgJWAet53NrSPN2TyS">
</div>
</nav>
</header>
</div>
The issue is mainly caused because you nesting so many flexboxes within each other. As such the elements will not span the entire available width automatically.
Give the nav tag a width of 100% to fill out the entire containers width: #nav-bar { width: 100% }
to align the logo to the right within a flexbox use margin-left: auto: .header-logo { margin-left: auto; }
Also you could improve your code by removing the ID from the nav element and target the nav element directly. As semantically you should only have one nav element it would be unecessary to asign an id to it. Same rule also counts for the header element.
Then you could remove display: flex; from the header which has only one child element in the first place and as such is useless. IMHO it would be smarter though to close the nav with the ul as the logog is semantically not part of the navbar.
Last but not least you could remove flex-direction: row as it is the default value anyways.
#nav-bar {
width: 100%;
}
.header-logo {
margin-left: auto;
}
/* original CSS */
#import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');
body {
margin: 0;
font-family: 'Trebuchet MS', sans-serif;
background-color: #efefef;
}
.wrapper {
position: relative;
}
.header-logo {
width: 20vw;
height: 20vw;
}
header {
width: 100%;
height: 4rem;
background: #609F92;
position: fixed;
display: flex;
font-family: Oswald, sans-serif;
font-size: 1.5rem;
}
#header-img {
width: 100%;
height: 100%;
border-radius: 50%;
box-shadow: 1px 1px 2px 1px;
}
#nav-bar {
display: flex;
flex-direction: row;
}
#nav-bar ul {
display: flex;
flex-direction: row;
align-items: center;
list-style: none;
}
#nav-bar li {
margin: 10px;
}
<div class="wrapper">
<header id="header">
<nav id="nav-bar">
<ul>
<li>Features</li>
<li>About Us</li>
<li>Contact</li>
</ul>
<div class="header-logo">
<img id="header-img" src="https://thumbnails-photos.amazon.com/v1/thumbnail/lFJOXJpuTKGgtJYa9-wScA?viewBox=943%2C943&ownerId=A4PYAHHROL8LR&groupShareToken=OSTx_M1GRRS1y_rPWtVfGA.8mpQdgJWAet53NrSPN2TyS">
</div>
</nav>
</header>
</div>
I also created a Codepen for you where I corrected the code to be semantically correct and to shroten it to the necessary lines: Codepen
This question already has answers here:
Make a div span two rows in a grid
(2 answers)
Closed 2 years ago.
I'm using display: flex; to create tiles view.
I'm trying to put the third picture under the second picture.
But, whenever I do it, the third picture went under the first picture and won't come under second picture,
#media screen and (min-width: 1000px) {
.main {
height:1800px;
width: 100%;
margin: 0px 0px 0px 0px;
position: relative;
z-index: 0;
}
.parallax {
/* The image used */
background-image: url("https://i.ibb.co/r272XPt/2019-2020.png");
/* Set a specific height */
min-height: 400px;
opacity: 60%;
filter: blur(2px);
-webkit-filter: blur(2px);
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.tiles{
position:relative;
top:100px;
width:90vw;
margin-left:5vw;
display: flex;
flex-wrap: wrap;
}
.chromebookHelpdesk img{
margin-left:5vw;
width:50vw;
display:block;
}
.subhelp{
height:25vw;
}
.subhelp img{
margin-left:5vw;
width:25vw;
display:block;
}
.studentsTour img{
margin-left:5vw;
width:20vw;
margin-top:5vw;
display:block;
}
#projects img {
text-align: center;
display: block;
width: 25vw;
margin: 20px;
}
.mission_logo {
width: 200px;
display: inline-block;
float: left;
text-align: center;
}
.mission {
text-align: center;
margin-top: 100px;
font-size: 20px;
}
.ingenuity {
color: #3cba54;
font-size: 60px !important;
}
.creativity {
color: #f4c20d;
font-size: 60px !important;
}
.innovation {
color: #db3236;
font-size: 60px !important;
}
}
#media only screen and (max-width: 1000px) {
.main {
height:2500px;
width: 100%;
margin: 0px 0px 0px 0px;
position: relative;
z-index: 0;
}
.parallax {
display: none;
}
.mission_logo {
width: 60vw;
text-align: center;
}
.mission {
text-align: center;
margin-top: 100px;
font-size: 15px;
}
.ingenuity {
color: #3cba54;
font-size: 40px !important;
}
.creativity {
color: #f4c20d;
font-size: 40px !important;
}
.innovation {
color: #db3236;
font-size: 40px !important;
}
}
.tiles h1 {
text-align: center;
font-size: 50px;
color: black;
}
.follow{
position:relative;
top:100px;
text-align:center;
border-radius: 50%;
background-color: #84e3ca;
width: 50vw;
height: 50vw;
margin-left: 25vw;
opacity:70%;
}
.follow h1{
font-size:35px;
padding-top: 20vw;
}
.follow h2{
font-size:30px;
}
<div class="main">
<div class="tiles">
<div class="chromebookHelpdesk"><a href="https://sledteam.github.io/sled/chromebook"><img
src="https://github.com/sledteam/sled/blob/master/Chromebook%20Helpdesk.png?raw=true" alt="Chromebook-Helpdesk"></a></div>
<div class="subhelp"><a href="https://sledteam.github.io/sled/chromebook"><img
src="https://github.com/sledteam/sled/blob/master/Sub%20Help.png?raw=true" alt="Sub Help"></a>
</div>
<div class="studentsTour"><a href="https://sledteam.github.io/sled/chromebook"><img
src="https://github.com/sledteam/sled/blob/master/New%20Students%20Tour.png?raw=true" alt="New Students Tour"></a></div>
</div>
I'm stuck with this for a week.
I would appreciate it if anyone knows a solution for this.
Complete guide to css flexbox
.tiles {
display: flex;
flex-wrap: wrap;
flex-direction: row;
flex: 1;
}
.section {
display: flex;
flex: 1;
flex-direction: column;
}
.item {
display: flex;
flex: 1;
padding: 1rem;
margin: 4px;
background: green;
color: white;
}
<div class="tiles">
<div class="section">
<div class="item">
<p>Chromebook Helpdesk</p>
</div>
</div>
<div class="section">
<div class="item">
<p>Sub Help</p>
</div>
<div class="item">
<p>Student Tour</p>
</div>
</div>
</div>
It is simple if you understand the concept here is the example:
As per your requirement you need 2 columns with single row so you will be creating flex property, now you need 2 columns hence you make it flex:50% like 2. Now coming to your image section where you need 2 images to be underneath so you will provide the height:50%(right images) and you will give height:100%(left image).
You can keep changing the sizes as you desire. You can also add responsive design for the same. Hope it helps.
* {
box-sizing: border-box;
}
.row {
display: flex;
}
.column {
flex: 50%;
padding: 5px;
}
<div class="row">
<div class="column">
<img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_02_zpsdz0zixcd.jpg" style="width:100%" />
</div>
<div class="column">
<div class="row">
<img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_02_zpsdz0zixcd.jpg" style="width:50%" />
</div>
<div class="row">
<img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_02_zpsdz0zixcd.jpg" style="width:50%" />
</div>
</div>
</div>
I have a project and i struggle with positioning elements in CSS. i want to create a header with a contact number and email to the right and in image at the centre.
The below is the code. suggestions to overcome this problem i'm facing are very welcome.
header {
display: block;
text-align: center;
}
#cw-logo-trans {
width: 200px;
display: inline-block;
align-items: right;
font-size: 24px;
}
#contacts {
margin-left: 5px;
float: left;
color: white;
font-size: 1.5em;
/* 40px/16=2.5em */
color: white;
}
.home {
width: 70px;
height: auto;
background-color: white;
padding: 10px;
margin: 10px;
float: left;
text-align: center;
}
<header>
<span id="cw-logo-trans" alt="cw-logo-trans">
<img src="images/cw_logo.png" alt="cw-logo-" > </span>
<span id="contacts">0800 111 111</br>email#emailyou.com</span>
<div class="home" alt="Home-button">Home</div>
</br>
</header>
Or you can use Flex as well.
.outer {
display: flex;
background-color: lightgray;
}
.outer div {
flex: 1;
align-items: center;
}
.logo {
display: flex;
justify-content: center;
}
<div class="outer">
<div></div>
<div class="logo">
<image src="https://facebookbrand.com/wp-content/uploads/2019/04/f_logo_RGB-Hex-Blue_512.png" height="40px" width="40px" />
</div>
<div>
<p>markzuckerberg#twitter.com</p>
<p>1234567890</p>
</div>
</div>
Here is my code
.header {
width: 100%;
height: 100px;
background: black;
}
.header .headerContainer {
position: relative;
top: 50%;
transform: translateY(-50%);
height: inherit;
}
img#logo {
height: 75%;
}
p#logotext {
color: white;
display: inline
}
<div class="header">
<div class="headerContainer">
<img src="https://cdn.worldvectorlogo.com/logos/react.svg" alt="Logo" id="logo" />
<p id="logotext">Welcome To Here</p>
</div>
</div>
However, this is not aligning the elements properly.
How should I modify my CSS so that headerContainer does the alignment properly?
You can use flexbox to solve this:
.header {
background: black;
height: 100px;
width: 100%;
}
.header .headerContainer {
align-items: center;
display: flex;
height: inherit;
}
img#logo {
height: 75%;
}
p#logotext {
color: white;
display: inline
}
<div class="header">
<div class="headerContainer">
<img src="https://placehold.it/50x50" alt="Logo" id="logo" />
<p id="logotext">Welcome To Here</p>
</div>
</div>
So you don't need to use position or tranform to vertical center the items. If you want to learn more about flexbox I recommend this site for a quick overview / reference.
Use This Code
<style>
.class{
Position:absolute;
top:50%;
left:50%;
transform:rotateX(-50%,50%);
}
</style>
You can also use CSS Grid.
.header {
background: black;
height: 100%
width: 100%;
padding: 20px;
}
.header .headerContainer {
display: grid;
grid-template-columns: 1fr 1fr;
}
img#logo {
width: auto;
height: auto;
align-self: center;
}
p#logotext {
color: white;
align-self: center;
}
<div class="header">
<div class="headerContainer">
<img src="http://via.placeholder.com/350x150" alt="Logo" id="logo" />
<p id="logotext">Welcome To Here</p>
</div>
</div>
so close .... you just need to put dispaly : flex; into headerContainer
.header {
background: black;
height: 100px;
width: 100%;
}
.header .headerContainer {
align-items: center;
display: flex;
height: inherit;
}
img#logo {
height: 75%;
}
p#logotext {
color: white;
display: inline
}