Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I am trying to create a custom search box. Please see code below.
Problem 1: The input element (although not visible) in the figure below appears to be above the search icon before it is clicked (see green circle). How can I place both as inline? Note: The layout of the blue container was created using flexbox.
.
Problem 2: In the image below, on clicking the search icon, a space appears between the input element and the icon element (see green circle in section 3). Is it a result of the flexbox property? How can I get rid of it?
Problem 3: I need help in perfectly aligning the contact details in section 1 (see image in problem 2) with their corresponding icons. The phone numbers and email address appear to be at the bottom of the icons instead of center.
Thank you!
body {
padding: 0 !important;
margin: 0 !important;
/* font-size: 1.2em; */
background: black;
}
* {
box-sizing: border-box;
}
/* PRE TOP NAVIGATION BAR */
.preTopNav {
background-color: navy;
display: flex;
flex-flow: row wrap;
justify-content: space-around;
align-items: center;
width: 100%;
}
.preTopNav-Items {
display: flex;
flex-flow: row wrap;
padding-top: 10px;
padding-bottom: 10px;
}
.preTopNav-Items img {
width: 20px;
height: 20px;
}
.preTopNav-Items a {
text-decoration: none;
color: white;
}
.preTopNav .contactDetails,
.preTopNav .socialDetails {
align-items: center;
justify-content: center;
}
.preTopNav .search {
align-items: center;
justify-content: flex-end;
width: 40px;
background-color: navy;
border-radius: 4px;
box-shadow: 10px 4px 10px 2px rgba(0, 0, 0, 0.5);
transition: width 0.5s;
padding: 0;
overflow: hidden;
border: mone;
}
.preTopNav .search img:hover {
cursor: pointer;
}
.preTopNav .search.active {
width: 300px;
}
.preTopNav .search input {
/* margin-right: 50px; */
position: relative;
right: 50px;
width: calc(100%-50px);
padding: 3px 10px;
font-size: 16px;
}
/* PHOTO SLIDESHOW */
/* MEDIA QUERIES */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Home BGS</title>
<link rel="stylesheet" href="main.css" />
<script
src="https://kit.fontawesome.com/718022a53c.js"
crossorigin="anonymous"
></script>
</head>
<body>
<!-- PRE TOP NAVIGATION BAR -->
<div class="preTopNav">
<div class="preTopNav-Items contactDetails">
<div class="contactDetails-Items">
<img src="https://www.telegram.org/img/t_logo.png" alt="" />
+2348056710255
</div>
<div class="contactDetails-Items">
<img src="https://www.telegram.org/img/t_logo.png" alt="" />
012911722
</div>
<div class="contactDetails-Items">
<img src="https://www.telegram.org/img/t_logo.png" alt="" />
<a href="info#bethelgeminischools.com"
>info#bethelgeminischools.com</a
>
</div>
</div>
<div class="preTopNav-Items socialDetails">
<a href="https://www.facebook.com/bethelgeminischools"
><img
src="/Icons/Facebook (Transparent - White Outline).png"
alt=""
/></a>
<a href="https://www.twitter.com/bethelgeminischools"
><img
src="/Icons/Twitter (Transparent - White Outline).png"
alt=""
/></a>
<a href="https://www.instagram.com/bethelgeminischools"
><img
src="/Icons/Instagram (Transparent - White Outline).png"
alt=""
/></a>
<a href="https://www.linkedin.com/bethelgeminischools"
><img
src="/Icons/LinkedIn (Transparent - White Outline).png"
alt=""
/></a>
<a href="https://www.wa.me/2348056710255"
><img
src="/Icons/Whatsapp (Transparent - White Outline).png"
alt=""
/></a>
<a href="https://www.t.me/bethelgeminischools"
><img
src="/Icons/Telegram (Transparent - White Outline).png"
alt=""
/></a>
</div>
<div class="preTopNav-Items search">
<input type="text" class="searchBar" placeholder="Search..." />
<img
class="searchIcon"
src="https://www.telegram.org/img/t_logo.png"
alt=""
/>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".searchIcon").click(function () {
$(".search").toggleClass("active");
});
});
</script>
</body>
</html>
You can simplify your HTML and use the flexbox efficiently.
Complete guide to CSS flexbox | Media Query for Responsive design
$(".searchIcon").click(function() {
$(".search").toggleClass("active");
})
* {
margin: 0
}
.preTopNav {
display: flex;
padding: 15px 20px;
align-items: center;
background-color: navy;
font-family: helvetica, arial, sans-serif;
}
.contactDetails {
display: flex;
flex: 1;
}
.contactDetails a {
display: flex;
text-decoration: none;
color: white;
margin-left: 20px;
align-items: center;
}
.contactDetails a:first-child {
margin-left: 0;
}
.contactDetails a img {
margin-right: 10px;
}
.socialDetails {
width: 30%;
display: flex;
justify-content: center;
}
.socialDetails a {
margin: 0 5px;
display: flex;
}
.search {
width: 18%;
display: flex;
justify-content: flex-end;
overflow: hidden;
}
.searchBar {
display: none;
}
.search.active .searchBar {
display: block;
margin-right: 10px;
box-sizing: border-box;
width: 100%;
transition: width 0.5s;
}
#media screen and (max-width: 991px) {
.preTopNav {
flex-direction: column
}
.socialDetails {
margin-top: 20px;
width: 100%;
justify-content: center;
}
.search {
width: 50%;
margin-top: 20px;
justify-content: center;
text-align: center;
}
}
#media screen and (max-width: 767px) {
.contactDetails a {
margin-bottom: 10px;
}
.contactDetails {
flex-direction: column;
align-items: center;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="preTopNav">
<div class="preTopNav-Items contactDetails">
<img src="https://placehold.it/24x24" alt="" /><span>+2348056710255M</span>
<img src="https://placehold.it/24x24" alt="" /><span>012911722</span>
<img src="https://placehold.it/24x24" alt="" /><span>info#bethelgeminischools.com</span>
</div>
<div class="preTopNav-Items socialDetails">
<img src="https://placehold.it/24x24" alt="" />
<img src="https://placehold.it/24x24" alt="" />
<img src="https://placehold.it/24x24" alt="" />
<img src="https://placehold.it/24x24" alt="" />
<img src="https://placehold.it/24x24" alt="" />
<img src="https://placehold.it/24x24" alt="" />
</div>
<div class="preTopNav-Items search">
<input type="text" class="searchBar" placeholder="Search..." />
<img class="searchIcon" src="https://placehold.it/24x24" alt="" />
</div>
</div>
Problem 1:
If you add display: flex to the parent div container the items will displayed in a grid like view.
Problem 2: The gap is caused by right css attribute. Also note that when using calc you need to add a space between the operator
.preTopNav .search input {
position: relative;
right: 50px; <-- This is causing the space/gap between the search box and icon
width: calc(100% - 50px); <-- Added space before and after minus
padding: 3px 10px;
font-size: 16px;
}
Problem 3: Make the parent containers display flex and add align-items: center to align properly.
.contactDetails-Items {
display: flex;
align-items: center;
margin-right: 20px;
}
I've created a Sandbox where you can see the final result.
Related
I need some help, I'm currently trying to make a portfolio using HTML following a tutorial I'm watching.
I used undraw to add an image but unfortunately, the image is stuck to the right:
I want to put the image underneath my icons but not sure on how to do to this. Any advice on how to get the SVG image in the centre underneath my icons?
#import url('https://fonts.googleapis.com/css2?family=Lato:wght#400;700&family=Poppins:wght#400;500;600&display=swap');
*{
color:black;
font-family: 'Lato', sans-serif;
padding: 0;
margin: 0;
box-sizing: border-box;
}
h1,h2,h3,h4,h5,h6,span{
color:black;
text-align: center;
line-height: 1.25;
}
h1{
font-size: 36px;
}
p{
line-height: 1.5;
font-size: 16px;
}
li{
list-style-type: none;
}
.flex{
display: flex; /* this automatically aligns like columns or rows with auto width and auto height */
}
.flex-1{
flex: 1; /* this makes sure that it is the entire height of the page */
}
/* Navigation bar */
.row{
width: 100%;
max-width: 800px;
margin: 0 auto;
}
.text-pink{
color: #FF69B4 ;
}
nav{
height: 100px;
width: 100%;
max-width: 1000px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav__link--list{
display: flex;
}
.nav__link--anchor{
margin: 0 12px;
color: black;
text-decoration: none;
font-weight: 700;
}
.nav__link--anchor-primary{
background-color: #FF69B4;
padding: 8px 20px;
border-radius: 50px;
color: white;
transition: all 300ms ease;
}
.nav__link--anchor-primary:hover{
background-color: #FF69B4;
}
.personal_logo{
font-size: 20px;
color: #FF69B4;
margin: 0 12px;
font-weight: bold;
}
/* About mE */
#about-me{
min-height: 100vh; /* entire height of the page */
display: flex;
flex-direction: column;
}
.about-me__info{
display: flex;
flex-direction: column;
}
.about-me__info--container {
display: flex;
flex-direction: column; /* so it is not side-by-side */
align-items: center;
max-width: 600px;
margin: 0 auto;
text-align: center;
}
.about-me--picture--mask{
width: 180px;
height: 180px;
border-radius: 100%;
overflow: hidden;
box-shadow: 0 8px 16px rgba(0,0,0,1);
margin-bottom: 20px;
}
.about-me__picture{
width: 100%;
transform: scale(1,1.1);
padding-top: 7px;
}
.about-me__info--para{
font-size: 15px;
margin-bottom: 28px;
}
.about-me__info--title{
margin-bottom: 15px;
}
.about-me__link{
font-size: 20px;
color:#FF69B4;
text-decoration: none;
padding: 0 16px;
}
.about-me__img--container{
flex: 1;
display: flex;
align-items: center;
}
<!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">
<title>Annette</title>
<link rel="stylesheet" href="./css/styles.css">
<script src="https://kit.fontawesome.com/6ad8c9aa3b.js" crossorigin="anonymous"></script>
</head>
<body>
<section id="about-me">
<nav>
<div class="personal_logo">Annette</div>
<ul class="nav__link--list">
<li class="nav__Link">
<a href="#languages" class="
nav__link--anchor
link__hover-effect
link_hover-effect--black"
>Languages</a>
</li>
<li class="nav__link">
<a href="#projects" class="
nav__link--anchor
link__hover-effect
link_hover-effect--black">
Projects</a>
</li>
<li class="nav__link">
<a href="" class=
"nav__link--anchor
nav__link--anchor-primary"
>Contact</a>
</li>
</ul>
</nav>
<div class="flex flex-1">
<div class=".about-me__info row"> <!--inside the row, there is 2 sections: infromation and image-->
<div class="about-me__info--container">
<figure class="about-me--picture--mask">
<img src="./images/Annette2.JPG" class= "about-me__picture" alt="Picture of Me!">
</figure> <!--this contains my image -->
<h1 class="about-me__info--title"> Hey! I'm <span class="text-pink">Jane Doe 👋 </span> </h1>
<h1>
<p class="about-me__info--para">
I recently just completed my <strong class="text-pink">insert text </strong> Throughout both degrees, I have always been interested in creating very engaging and interactive PowerPoints to present my work. This led to my passion for web development and designing projects on topics that I’m interested in such as <strong class="text-pink">Ethical AI, Social Justice and Emerging Technologies. </strong>
</p>
<div class="about-me__links"></div>
<a href="" class="about-me__link">
<i class="fa-brands fa-linkedin"></i>
</a>
<a href="" class="about-me__link">
<i class="fa-brands fa-github"></i>
</a>
<a href="" class="about-me__link">
<i class="fa-solid fa-inbox"></i>
</a>
<a href="" class="about-me__link">
<i class="fa-solid fa-file-pdf"></i>
</a>
</div>
</div>
<figure class="about-me__img--container">
<img src="./Assests/undraw_proud_coder_re_exuy.svg" alt="">
</figure>
</div>
</section>
</body>
</html>
Just need a little to fix the mark up. And to put the image in its own div, below the flex stuff.
#import url('https://fonts.googleapis.com/css2?family=Lato:wght#400;700&family=Poppins:wght#400;500;600&display=swap');
* {
color: black;
font-family: 'Lato', sans-serif;
padding: 0;
margin: 0;
box-sizing: border-box;
}
h1,
h2,
h3,
h4,
h5,
h6,
span {
color: black;
text-align: center;
line-height: 1.25;
}
h1 {
font-size: 36px;
}
p {
line-height: 1.5;
font-size: 16px;
}
li {
list-style-type: none;
}
.flex {
display: flex;
/* this automatically aligns like columns or rows with auto width and auto height */
}
.flex-1 {
flex: 1;
/* this makes sure that it is the entire height of the page */
}
/* Navigation bar */
.row {
width: 100%;
max-width: 800px;
margin: 0 auto;
}
.text-pink {
color: #FF69B4;
}
nav {
height: 100px;
width: 100%;
max-width: 1000px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav__link--list {
display: flex;
}
.nav__link--anchor {
margin: 0 12px;
color: black;
text-decoration: none;
font-weight: 700;
}
.nav__link--anchor-primary {
background-color: #FF69B4;
padding: 8px 20px;
border-radius: 50px;
color: white;
transition: all 300ms ease;
}
.nav__link--anchor-primary:hover {
background-color: #FF69B4;
}
.personal_logo {
font-size: 20px;
color: #FF69B4;
margin: 0 12px;
font-weight: bold;
}
/* About mE */
#about-me {
min-height: 100vh;
/* entire height of the page */
display: flex;
flex-direction: column;
}
.about-me__info {
display: flex;
flex-direction: column;
}
.about-me__info--container {
display: flex;
flex-direction: column;
/* so it is not side-by-side */
align-items: center;
max-width: 600px;
margin: 0 auto;
text-align: center;
}
.about-me--picture--mask {
width: 180px;
height: 180px;
border-radius: 100%;
overflow: hidden;
box-shadow: 0 8px 16px rgba(0, 0, 0, 1);
margin-bottom: 20px;
}
.about-me__picture {
width: 100%;
transform: scale(1, 1.1);
padding-top: 7px;
}
.about-me__info--para {
font-size: 15px;
margin-bottom: 28px;
}
.about-me__info--title {
margin-bottom: 15px;
}
.about-me__link {
font-size: 20px;
color: #FF69B4;
text-decoration: none;
padding: 0 16px;
}
.about-me__img--container {
flex: 1;
display: flex;
align-items: center;
}
<!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">
<title>Annette</title>
<link rel="stylesheet" href="./css/styles.css">
<script src="https://kit.fontawesome.com/6ad8c9aa3b.js" crossorigin="anonymous"></script>
</head>
<body>
<section id="about-me">
<nav>
<div class="personal_logo">Annette</div>
<ul class="nav__link--list">
<li class="nav__Link">
<a href="#languages" class="
nav__link--anchor
link__hover-effect
link_hover-effect--black">Languages</a>
</li>
<li class="nav__link">
<a href="#projects" class="
nav__link--anchor
link__hover-effect
link_hover-effect--black">
Projects</a>
</li>
<li class="nav__link">
<a href="" class="nav__link--anchor
nav__link--anchor-primary">Contact</a>
</li>
</ul>
</nav>
<div class="flex flex-1">
<div class=".about-me__info row">
<!--inside the row, there is 2 sections: infromation and image-->
<div class="about-me__info--container">
<figure class="about-me--picture--mask">
<img src="./images/Annette2.JPG" class="about-me__picture" alt="Picture of Me!">
</figure>
<!--this contains my image -->
<h1 class="about-me__info--title"> Hey! I'm <span class="text-pink">Jane Doe 👋 </span> </h1>
<p class="about-me__info--para">
I recently just completed my <strong class="text-pink">insert text </strong> Throughout both degrees, I have always been interested in creating very engaging and interactive PowerPoints to present my work. This led to my passion for web development
and designing projects on topics that I’m interested in such as <strong class="text-pink">Ethical AI, Social Justice and Emerging Technologies. </strong>
</p>
<div class="about-me__links">
<a href="" class="about-me__link">
<i class="fa-brands fa-linkedin"></i>
</a>
<a href="" class="about-me__link">
<i class="fa-brands fa-github"></i>
</a>
<a href="" class="about-me__link">
<i class="fa-solid fa-inbox"></i>
</a>
<a href="" class="about-me__link">
<i class="fa-solid fa-file-pdf"></i>
</a>
</div>
</div>
</div>
</div>
<div>
<figure class="about-me__img--container" >
<img src="https://picsum.photos/200" alt="" style="margin: auto">
</figure>
</div>
</section>
</body>
</html>
The website mobile version looks like this:desktop mobile view
But on my phone it looks like this: phone view
I make use of box-sizing, still don’t know why it’s having different scaling
Check what measurement unit you used. If it is Percent (%) or something else you should convert it to pixels, as Percent and other similar units are dependent on the screen size. If this is not the issue, please include the code for it so we can find the issue. Thanks!
If you set the width of the image in terms of the viewport size then you get a circle (at least on the tests I did on IOS).
Obviously you will want to set the vw amount to suit your particular requirement.
This snippet sets it to 10vw for this demo.
However, there is another factor. I think you are relying on the natural dimensions of the images to be square. If they aren't then things could look distorted so this snippet adds an object-fit: cover.This still relies on the faces being in a more or less central position in the overall image - but that would need correction depending on each individual image.
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.kill {
background: #1d1d1d;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(4.9);
-webkit-backdrop-filter: blur(4.9);
height: 100%;
color: white;
padding-top: 15px;
}
.navi {
width: 100%;
}
.nipp {
position: relative;
z-index: 33;
}
.rate {
background: transparent;
border: 0;
outline: none;
margin-right: 25px;
align-items: center;
}
.rell {
justify-content: end;
display: flex;
}
.mage {
width: 10vw;
height: 10vw;
object-fit: cover;
cursor: pointer;
}
.mage1 {
display: flex;
flex-direction: row;
justify-content: center;
}
.mage2 {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
position: relative;
}
.mage4 {
border: 3px solid #5cb85c;
padding: 5px;
}
.butn {
border: 0;
outline: none;
background-color: transparent;
position: absolute;
left: 50px;
}
.txt {
margin-left: -10px;
}
#media screen and (max-width:992px) {
.kill {
background: #1d1d1d;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(4.9);
-webkit-backdrop-filter: blur(4.9);
height: 100%;
color: white;
padding-top: 15px;
}
.navi {
width: 100%;
}
.nipp {
position: relative;
z-index: 33;
}
.rate {
background: transparent;
border: 0;
outline: none;
margin-right: 25px;
align-items: center;
}
.rell {
justify-content: end;
display: flex;
}
.mage {
width: 10vw;
height: 10vw;
object-fit: cover;
cursor: pointer;
}
.mage1 {
display: flex;
flex-direction: row;
justify-content: center;
}
.mage2 {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
position: relative;
}
.mage4 {
border: 3px solid #5cb85c;
padding: 5px;
}
.butn {
border: 0;
outline: none;
background-color: transparent;
position: absolute;
left: 50px;
}
.txt {
margin-left: -10px;
}
}
</style>
<!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">
<title>Document</title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.0/font/bootstrap-icons.css" integrity="sha384-ejwKkLla8gPP8t2u0eQyL0Q/4ItcnyveF505U0NIobD/SMsNyXrLti6CWaD0L52l" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div class="kill">
<nav class="navbar navbar-expand-sm navbar-dark nipp navi">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<i class="bi bi-whatsapp h2"></i> Whatsapp
</a>
<div class="rell">
<button class="rate text-light h2"> <i class="bi bi-search"></i></button>
<img src="https://randomuser.me/api/portraits/men/12.jpg" alt="" class="rounded-circle w-25">
</div>
</div>
</nav>
<section>
<div class="container pt-4">
<div class="mage1">
<div class="mage2">
<img src="https://randomuser.me/api/portraits/men/10.jpg" class="rounded-circle mage ms-3 " alt="">
<h6 class="mt-2 txt">You</h6>
<button class="butn"> <i class="bi bi-plus-circle-fill"></i></button>
</div>
<div class="mage2">
<img src="https://randomuser.me/api/portraits/women/1.jpg" class="rounded-circle mage ms-3 mage4" alt="">
<h6 class="mt-2 txt">David</h6>
</div>
<div class="mage2">
<img src="https://randomuser.me/api/portraits/men/6.jpg" class="rounded-circle mage ms-3 mage4" alt="">
<h6 class="mt-2 txt">David</h6>
</div>
<div class="mage2">
<img src="https://randomuser.me/api/portraits/women/18.jpg" class="rounded-circle mage ms-3 mage4" alt="">
<h6 class="mt-2 txt">David</h6>
</div>
<div class="mage2">
<img src="https://randomuser.me/api/portraits/men/14.jpg" class="rounded-circle mage ms-3 mage4" alt="">
<h6 class="mt-2 txt">David</h6>
</div>
</div>
</div>
</section>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
Incidentally, I'm not sure why you bother to repeat the styling und er the media query, for example for mage, but that doesn't affect your question so I've left it.
I'm trying to create a responsive dots connecting among the images like below.
I'm able to achieve this with CSS, but the layout is collapsing when I tried to change the image widths or parent div width. How can I make this layout work for all screens and image dimensions?
Here is my code link:
https://jsfiddle.net/SampathPerOxide/q2yab607/29/
.dotted-line,
.dotted-line1 {
display: flex;
}
.over {
display: flex;
align-items: center;
justify-content: center;
}
.dotted-line::after {
content: ".......";
letter-spacing: 3px;
font-size: 30px;
color: #9cbfdb;
display: table-cell;
vertical-align: middle;
padding-left: 1px;
}
.dotted-line1::before {
content: "........";
letter-spacing: 3px;
font-size: 30px;
color: #9cbfdb;
display: table-cell;
vertical-align: middle;
padding-right: 1px;
}
.top:before {
transform: rotate(90deg);
content: "........";
letter-spacing: 3px;
font-size: 30px;
color: #9cbfdb;
position: absolute;
top: 5em;
margin-left: 0.5em;
}
<div style="width:90px;margin:0px auto;">
<div style=" height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
" class="top">
<img src="https://i.pinimg.com/736x/39/4b/f6/394bf6e1c3f2a7351105290ef9fe9dd1.jpg" style="width:100px;">
</div>
<br/><br/><br/>
<div class="over">
<div style="" class="dotted-line">
<img src="https://stat.overdrive.in/wp-content/odgallery/2020/06/57263_2020_Mercedes_Benz_GLS.jpg" style="width:100px;">
</div>
<div style="">
<h4 style="text-align:center;padding:10px;">
Choose
</h4>
</div>
<div style="" class="dotted-line1">
<img src="https://stat.overdrive.in/wp-content/odgallery/2020/06/57263_2020_Mercedes_Benz_GLS.jpg" style="width:100px;">
</div>
</div>
</div>
I would go for
display flex to easily arrange the items inside a flexbox
Use a repeated background-image with radial-gradient to achieve repeated responsive dots
* {
margin: 0;
box-sizing: border-box;
}
h4 {
padding: 1em;
}
.flex {
display: flex;
}
.flex.col {
flex-direction: column;
}
.flex.center {
justify-content: center;
}
.grow {
flex-grow: 1;
}
.dots-h,
.dots-v {
flex-grow: 1;
background-image: radial-gradient(1px 1px at center, #888 1px, transparent 1px);
}
.dots-h {
height: 1em;
background-repeat: repeat-x;
background-size: 10px 1em;
margin: auto 0;
}
.dots-v {
width: 1em;
background-repeat: repeat-y;
background-size: 1em 10px;
margin: 0 auto;
}
<div>
<div class="flex center">
<img src="https://picsum.photos/id/1/100/100">
</div>
<div class="flex center">
<img src="https://picsum.photos/id/2/100/100">
<div class="dots-h"></div>
<div class="flex col center">
<div class="dots-v"></div>
<h4>Choose</h4>
<div class="grow"><!-- Just a spacer --></div>
</div>
<div class="dots-h"></div>
<img src="https://picsum.photos/id/9/100/100">
</div>
</div>
I want to make the hero title even with the navbar. However, I ran into some responsive issues. Right now I'm doing frontend mentor challenges and they advised that the max width for desktop should be 1440px. Here's where I'm not sure how to do it correctly.
I need the hero title and the logo be in one line.
I want to apply margin auto to navbar but that doesn't seem to work at all.
Any idea how to fix this? My idea is to set the width of the container and navbar both to 1440px= 90em but not sure if that's a right way.
header {
position: absolute;
z-index: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
max-width: 90em;
width: 100%;
padding: 2em;
min-height: 8vh;
top: 0;
left: 0;
margin: 0 auto;
}
header img {
width: 10em;
height: 2em;
}
header ul {
list-style: none;
}
header ul a {
text-decoration: none;
}
header ul a li {
display: inline-block;
padding: 2em;
color: white;
}
header ul a li:hover {
color: #000;
}
header .burger {
display: none;
}
#media only screen and (max-width: 996px) {
header {
padding: 2.5em;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
header ul {
display: none;
}
header .burger {
display: block;
}
header .burger img {
width: 3em;
}
}
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: Alata;
}
.container {
min-height: 100vh;
width: 100%;
position: relative;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
display: -ms-grid;
display: grid;
place-items: center;
background-image: url("../images/desktop/image-hero.jpg");
-webkit-box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.3);
}
.container__intro {
max-width: 90em;
padding: 2em;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.container__intro__desc {
padding: 2em 5em 2em 2em;
border: 1px solid white;
}
.container__intro__desc p {
color: white;
font-size: 4rem;
font-family: Josefin Sans;
}
img {
width: 100%;
height: auto;
}
/*# sourceMappingURL=main.css.map */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Landing page</title>
<link rel="stylesheet" href="/css/main.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Alata&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght#300&display=swap" rel="stylesheet">
</head>
<body>
<header>
<a href="">
<img src="images/logo.svg" alt="logo">
</a>
<nav>
<ul>
<a href="">
<li>About</li>
</a>
<a href="">
<li>Careers</li>
</a>
<a href="">
<li>Events</li>
</a>
<a href="">
<li>Products</li>
</a>
<a href="">
<li>Support</li>
</a>
</ul>
<div class="burger">
<img src="images/icon-hamburger.svg" alt="">
</div>
</nav>
</header>
<div class="container">
<div class="container__intro">
<div class="container__intro__desc">
<p>
Immersive
</p>
<p>
Experiences
</p>
<p>
That Deliver
</p>
</div>
</div>
</div>
<div class="container">
<div class="img-container">
</div>
<div class="__desc">
</div>
</div>
<div class="container">
<div class="__top">
<p>Our Creations</p>
See All
</div>
<div class="__grid">
<div class="item">
<img src="" alt="">
<p>Deep</p>
<p>Earth</p>
</div>
<div class="item">
<img src="" alt="">
<p>Night</p>
<p>Arcade</p>
</div>
<div class="item">
<img src="" alt="">
<p>Soccer</p>
<p>Team VR</p>
</div>
<div class="item">
<img src="" alt="">
<p>The</p>
<p>Grid</p>
</div>
<div class="item">
<img src="" alt="">
<p>From Up</p>
<p>Above VR</p>
</div>
<div class="item">
<img src="" alt="">
<p>Pocket </p>
<p>Borealis</p>
</div>
<div class="item">
<img src="" alt="">
<p>The</p>
<p>Curiosity</p>
</div>
<div class="item">
<img src="" alt="">
<p>Make It</p>
<p>Fisheye</p>
</div>
</div>
</div>
</body>
</html>
flexbox, flexbox, flexbox!
#container{
max-width:1440px;
display:flex;
margin:0 auto;
}
#header{
border:solid 2px black;
flex-grow:1;
text-align:center;
}
<div id='container'>
<img src='https://via.placeholder.com/160x32.png' alt='log'>
<div id='header'>
here's to all the girls I...</div>
</div>
I want to have my link displayed when I hover over the image. The way I wrote the code displays the link only if I hover over the link itself(which is contained in the image div). Any ideas how I should go on?
.image-text-wrapper {
position: absolute;
top: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
text-align: center;
padding-left: 100px;
padding-right: 100px;
font-size: 1.5em;
}
.image-text-wrapper .xx {
transition: 1s;
font-weight: 600;
margin: 20px;
}
.image-text-wrapper .xx a {
color: transparent !important;
}
.image-text-wrapper a:hover {
color: lightseagreen !important;
text-decoration: none;
}
<div class="portfolio-img-background" style="background-image:url()">
<div class="xx">
<a href="#">
Text
</a>
</div>
</div>
This is a solution using just CSS
#image{
width:200px;
height:200px;
background:black;
display:flex;
align-items:center;
justify-content: center;
}
#link{
display:none;
}
#image:hover > #link {
display:block;
}
<div id="image" class="portfolio-img-background" style="background-image:url()">
<div class="xx" id="link">
<a href="#">
Hi!, im a link
</a>
</div>
</div>
This CSS class at the bottom of your code can be slightly modified to make this work.
.image-text-wrapper:hover a {
color: lightseagreen !important;
text-decoration: none;
}