I made a simple card with CSS. I'm trying to make it responsive but when I resize dimensions using DevTools, the card overflows over entire page. I know overflow property prevents this but I think there exists better ways to design.
The problem:
This is standard look of card
This is the look of card when I resize:
How can I prevent this from happening? or at least make them look good?
HTML:
<body>
<div class="container">
<div class="card">
<span class="circle">
<svg width="17" height="16" xmlns="http://www.w3.org/2000/svg">
<path
d="m9.067.43 1.99 4.031c.112.228.33.386.58.422l4.45.647a.772.772 0 0 1 .427 1.316l-3.22 3.138a.773.773 0 0 0-.222.683l.76 4.431a.772.772 0 0 1-1.12.813l-3.98-2.092a.773.773 0 0 0-.718 0l-3.98 2.092a.772.772 0 0 1-1.119-.813l.76-4.431a.77.77 0 0 0-.222-.683L.233 6.846A.772.772 0 0 1 .661 5.53l4.449-.647a.772.772 0 0 0 .58-.422L7.68.43a.774.774 0 0 1 1.387 0Z"
fill="#FC7614"
/>
</svg>
</span>
<h2>How did we do?</h2>
<p>
Please let us know how we did with your suppoer request. All feedback
is appreciated to help us improve our offering!
</p>
<div class="rating">
<span class="circle">1</span>
<span class="circle">2</span>
<span class="circle">3</span>
<span class="circle">4</span>
<span class="circle">5</span>
</div>
<button class="btn">SUBMIT</button>
</div>
</div>
</body>
CSS:
#import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght#9..144,500;9..144,600&family=Overpass:wght#400;700&display=swap");
:root {
--mobile-width: 375px;
--desktop-width: 1440px;
--btn-hover: hsl(0, 0%, 100%);
--rating-hover: hsl(217, 12%, 63%);
--body-background: #121417;
--card-background: #252d37;
--p-font-size: 15px;
--p-color: hsl(216, 12%, 54%);
}
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
font-family: "Overpass", sans-serif;
font-size: 15px;
}
.container {
width: 100%;
height: 100%;
background-color: var(--body-background);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
/* overflow: scroll; */
}
.card {
width: 20rem;
background-color: var(--card-background);
padding: 20px;
border-radius: 15px;
max-width: calc(100% - 2rem);
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.5rem;
}
.card > * {
margin-bottom: 1rem;
}
.card h2 {
color: var(--btn-hover);
font-weight: 700;
letter-spacing: 2px;
font-size: 700;
}
.card p {
color: var(--p-color);
font-size: 15px;
font-weight: 100 !important;
}
.card .rating {
display: flex;
justify-content: space-between;
gap: 1rem;
}
.card .circle {
display: inline-flex;
justify-content: center;
align-items: center;
background-color: #30363f;
width: 2.5rem;
height: 2.5rem;
text-align: center;
border-radius: 50%;
color: var(--p-color);
}
First of all, what device of yours has an 88 pixels viewport width? That's not small, it's extra tiny. Even smartwatches are bigger than that.
After analyzing your code, to make it fit to such a tiny screen you need to adapt each sections that are overflowing:
your pagination/ratings needs a flex-wrap: wrap;
And the card's text need to be broken so you can either use word-break: break-all; or hyphens: auto;
#import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght#9..144,500;9..144,600&family=Overpass:wght#400;700&display=swap");
:root {
--mobile-width: 375px;
--desktop-width: 1440px;
--btn-hover: hsl(0, 0%, 100%);
--rating-hover: hsl(217, 12%, 63%);
--body-background: #121417;
--card-background: #252d37;
--p-font-size: 15px;
--p-color: hsl(216, 12%, 54%);
}
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
font-family: "Overpass", sans-serif;
font-size: 15px;
}
.container {
width: 100%;
height: 100%;
background-color: var(--body-background);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
/* overflow: scroll; */
}
.card {
width: 20rem;
background-color: var(--card-background);
padding: 20px;
border-radius: 15px;
max-width: calc(100% - 2rem);
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.5rem;
}
.card > * {
margin-bottom: 1rem;
}
.card h2 {
color: var(--btn-hover);
font-weight: 700;
letter-spacing: 2px;
font-size: 700;
}
.card p {
color: var(--p-color);
font-size: 15px;
font-weight: 100 !important;
/* ADDED HERE */
hyphens: auto;
}
.card .rating {
display: flex;
justify-content: space-between;
gap: 1rem;
/* ADDED HERE*/
flex-wrap: wrap;
}
.card .circle {
display: inline-flex;
justify-content: center;
align-items: center;
background-color: #30363f;
width: 2.5rem;
height: 2.5rem;
text-align: center;
border-radius: 50%;
color: var(--p-color);
}
<body>
<div class="container">
<div class="card">
<span class="circle">
<svg width="17" height="16" xmlns="http://www.w3.org/2000/svg">
<path
d="m9.067.43 1.99 4.031c.112.228.33.386.58.422l4.45.647a.772.772 0 0 1 .427 1.316l-3.22 3.138a.773.773 0 0 0-.222.683l.76 4.431a.772.772 0 0 1-1.12.813l-3.98-2.092a.773.773 0 0 0-.718 0l-3.98 2.092a.772.772 0 0 1-1.119-.813l.76-4.431a.77.77 0 0 0-.222-.683L.233 6.846A.772.772 0 0 1 .661 5.53l4.449-.647a.772.772 0 0 0 .58-.422L7.68.43a.774.774 0 0 1 1.387 0Z"
fill="#FC7614"
/>
</svg>
</span>
<h2>How did we do?</h2>
<p>
Please let us know how we did with your suppoer request. All feedback
is appreciated to help us improve our offering!
</p>
<div class="rating">
<span class="circle">1</span>
<span class="circle">2</span>
<span class="circle">3</span>
<span class="circle">4</span>
<span class="circle">5</span>
</div>
<button class="btn">SUBMIT</button>
</div>
</div>
</body>
Related
Here is the JSfiddle complete code link:
CODE
my clock code output
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background: #0b172a;
font-family: sans-serif;
}
#container {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 5rem;
color: white;
text-transform: uppercase;
}
.clock-ctr {
position: relative;
border: 2px solid white;
height: 80vh;
width: 80vw;
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
}
.hour-ctr {
grid-area: hour;
}
.min-ctr {
grid-area: min;
}
.sec-ctr {
grid-area: sec;
}
.ampm {
grid-area: ampm;
background: #bc4123;
}
.time-ctr {
position: absolute;
height: 70%;
width: 90%;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto;
gap: 10px;
grid-template-areas: "hour min sec" "ampm ampm ampm";
}
h1 {
margin-bottom: 1rem;
letter-spacing: 8px;
font-size: 2.5rem;
}
.time-box {
background: #bc4123;
border-radius: 10px;
display: grid;
justify-items: center;
align-items: center;
height: auto;
text-align: center;
font-weight: bold;
font-size: 28px;
}
<div id="container">
<h1 class="clock-title">Clock</h1>
<div class="clock-ctr">
<div class="time-ctr">
<div class="hour-ctr time-box">
<p class="hour-value">00</p>
<p class="hour-title">Hour</p>
</div>
<div class="min-ctr time-box">
<p class="min-value">00</p>
<p class="min-title">Minute</p>
</div>
<div class="sec-ctr time-box">
<p class="sec-value">00</p>
<p class="sec-title">Second</p>
</div>
<p class="ampm time-box">AM</p>
</div>
</div>
</div>
Can any one tell me how to improve this code
I tried to make is completely responsive but it is not not working,
I tired to use flex to make the element appear in center of page.
Then I use grid to create the clock layout and i didn't knew how to align the cells so I used grid again in them. I was using rem and em to make responsive code but it didn't work out well. please review my code.
This is because of the font-size of the time-box div that is not responsive (28px whatever the device size), To make it responsive I added media queries to change the font depending on the device width, As presented in this example:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background: #0b172a;
font-family: sans-serif;
}
#container {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 5rem;
color: white;
text-transform: uppercase;
}
.clock-ctr {
position: relative;
border: 2px solid white;
height: 80vh;
width: 80vw;
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
}
.hour-ctr {
grid-area: hour;
}
.min-ctr {
grid-area: min;
}
.sec-ctr {
grid-area: sec;
}
.ampm {
grid-area: ampm;
background: #bc4123;
}
.time-ctr {
position: absolute;
height: 70%;
width: 90%;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto;
gap: 10px;
grid-template-areas: "hour min sec" "ampm ampm ampm";
}
h1 {
margin-bottom: 1rem;
letter-spacing: 8px;
font-size: 2.5rem;
}
.time-box {
background: #bc4123;
border-radius: 10px;
display: grid;
justify-items: center;
align-items: center;
height: auto;
text-align: center;
font-weight: bold;
}
#media (min-width:768px) {
.time-box {
font-size: 18px;
}
}
#media (min-width:1024px) {
.time-box {
font-size: 22px;
}
}
#media (min-width:1280px) {
.time-box {
font-size: 28px;
}
}
<div id="container">
<h1 class="clock-title">Clock</h1>
<div class="clock-ctr">
<div class="time-ctr">
<div class="hour-ctr time-box">
<p class="hour-value">00</p>
<p class="hour-title">Hour</p>
</div>
<div class="min-ctr time-box">
<p class="min-value">00</p>
<p class="min-title">Minute</p>
</div>
<div class="sec-ctr time-box">
<p class="sec-value">00</p>
<p class="sec-title">Second</p>
</div>
<p class="ampm time-box">AM</p>
</div>
</div>
</div>
You can as well use calc() function, so you can calculate your font size relative to the screen width like this:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background: #0b172a;
font-family: sans-serif;
}
#container {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 5rem;
color: white;
text-transform: uppercase;
}
.clock-ctr {
position: relative;
border: 2px solid white;
height: 80vh;
width: 80vw;
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
}
.hour-ctr {
grid-area: hour;
}
.min-ctr {
grid-area: min;
}
.sec-ctr {
grid-area: sec;
}
.ampm {
grid-area: ampm;
background: #bc4123;
}
.time-ctr {
position: absolute;
height: 70%;
width: 90%;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto;
gap: 10px;
grid-template-areas: "hour min sec" "ampm ampm ampm";
}
h1 {
margin-bottom: 1rem;
letter-spacing: 8px;
font-size: 2.5rem;
}
.time-box {
background: #bc4123;
border-radius: 10px;
display: grid;
justify-items: center;
align-items: center;
height: auto;
text-align: center;
font-weight: bold;
font-size: calc(18px + 0.390625vw);
}
<div id="container">
<h1 class="clock-title">Clock</h1>
<div class="clock-ctr">
<div class="time-ctr">
<div class="hour-ctr time-box">
<p class="hour-value">00</p>
<p class="hour-title">Hour</p>
</div>
<div class="min-ctr time-box">
<p class="min-value">00</p>
<p class="min-title">Minute</p>
</div>
<div class="sec-ctr time-box">
<p class="sec-value">00</p>
<p class="sec-title">Second</p>
</div>
<p class="ampm time-box">AM</p>
</div>
</div>
</div>
the issue with the CSS code in the Stack Overflow question is that the left and right values for the #nav element are set to 0. This causes the element to take up the full width of its parent element, which is likely not the intended behavior.
To fix this issue, you can try setting the left and right values to auto like this:
#nav {
position: fixed;
top: 0;
left: auto;
right: auto;
width: 100%;
height: 60px;
background-color: white;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
z-index: 1000;
}
With this change, the #nav element will no longer take up the full width of its parent element and will instead be positioned at the top of the page with its width set to 100%.
I worked on a URL shortener website, and I used also some wow.js and animate.css libraries and I was surprised when I finished the work when I saw the hero image of the first section with the same CSS style width: 50%.
Well, it looks like I want it on Microsoft Edge but it looks different on Fire Fox, the only solution I found to make the image looks like Microsoft Edge is to change the to width: 100%
live demo: https://urlshortapi.netlify.app/public/
My code:
#import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
scroll-behavior: smooth;
font-family: 'Poppins', sans-serif;
}
:root {
/* ### Primary */
--Cyan: hsl(180, 66%, 49%);
--Dark-Violet: hsl(257, 27%, 26%);
--Black: #000;
--White: #FFF;
/* ### Secondary */
--Red: hsl(0, 87%, 67%);
--Green: green;
/* ### Neutral */
--Gray: hsl(0, 0%, 75%);
--Grayish-Violet: hsl(257, 7%, 63%);
--Very-Dark-Blue: hsl(255, 11%, 22%);
--Very-Dark-Violet: hsl(260, 8%, 14%);
}
body {
position: relative;
overflow-x: hidden;
}
nav {
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: row;
}
nav>div {
margin: 18px 20px;
}
.left-side {
display: flex;
align-items: center;
justify-content: space-between;
}
ul {
list-style: none;
display: flex;
align-items: center;
flex-direction: row;
justify-content: center;
margin-left: 25px;
}
ul>li {
margin: 0 12px;
font-weight: 600;
font-size: 1.2rem;
color: var(--Gray);
cursor: pointer;
transition: 1s;
}
ul>li:hover {
color: var(--Very-Dark-Blue);
}
.logo {
cursor: pointer;
transition: 1s;
}
.right-side {
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
}
a {
text-decoration: none;
color: var(--Gray);
font-size: 1.2rem;
font-weight: 600;
margin: 0 12px;
transition: 1s;
cursor: pointer;
}
a:hover {
color: var(--Very-Dark-Blue);
}
header {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 40px;
padding-bottom: 130px;
width: 100%;
}
.title {
font-size: 4.5vw;
line-height: 5vw;
padding: 0 10px;
}
.pre-title {
font-size: 1.6vw;
width: 90%;
color: var(--Gray);
padding: 0 10px;
}
.header-side {
margin-left: 10%;
height: 100%;
}
.illustration {
width: 50%;
}
.exc {
padding: 10px 20px;
font-size: 1.2rem;
font-weight: 600;
color: white;
border-radius: 30px;
background-color: var(--Cyan);
transition: 1s;
cursor: pointer;
}
.exc:hover {
background-color: aquamarine;
color: var(--Very-Dark-Blue);
}
.started-btn {
padding: 10px 20px;
border: transparent;
margin-top: 10px;
font-size: 1.1rem;
}
section {
width: 100%;
background-color: var(--Gray);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.container {
position: relative;
top: -60px;
width: 80%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin-top: 0px;
}
.line {
display: none;
}
.input-div {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
border-radius: 5px;
padding: 30px;
background-image: url(../images/bg-boost-desktop.svg);
background-color: var(--Very-Dark-Blue);
background-repeat: no-repeat;
background-position: center;
}
.input {
padding: 10px 12px;
outline: none;
width: 100%;
border-radius: 7px;
border: transparent;
transition: 2s;
}
.alert-div {
display: flex;
align-items: flex-start;
justify-content: center;
flex-direction: column;
width: 70%;
position: relative;
top: 12px;
}
.alert-i {
color: var(--Red);
transition: 0.1s;
}
/*for js style*/
.input-check-red {
border: 2px solid var(--Red);
padding: 8px 12px;
}
.input-check-red::placeholder {
color: var(--Red)
}
.input-check-green {
border: 2px solid var(--Green);
padding: 8px 12px;
}
.input-btn {
border-radius: 5px;
padding: 9px 15px;
font-size: 14px;
border: transparent;
margin-left: 10px;
transition: 1s;
}
/*js style for each copy btn*/
.copy-btn-style,
.copy-btn-style:hover {
background-color: var(--Very-Dark-Blue);
color: var(--White);
}
.added {
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: row;
border-radius: 5px;
width: 100%;
margin-top: 15px;
padding: 7px 10px;
background-color: white;
}
.added>p {
margin-left: 10px;
font-size: 1rem;
color: var(--Black);
}
.added>div {
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
margin-right: 10px;
}
.added>div>a {
font-size: 1rem;
color: var(--Cyan);
margin-right: 15px;
}
.copy-btn {
margin: 0;
padding: 5px 10px;
}
.advanced-stats-main {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.title2 {
text-align: center;
font-size: 3.8vw;
padding: 0 10px;
}
.hamburger {
display: none;
cursor: pointer;
height: 40px;
width: 40px;
margin-bottom: 3px;
margin-right: 15px;
transition: 1s;
}
.hamburger:hover {
transform: translateX(-5px);
}
.pre-title2 {
text-align: center;
margin-top: 5px;
color: var(--Grayish-Violet);
font-size: 1.8vw;
padding: 0 10px;
width: 80%;
line-height: 2vw;
font-weight: 600;
text-align: center;
padding: 0 10px;
}
.feautures {
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
margin-top: 100px;
width: 80%;
}
.feature {
position: relative;
width: calc(100%/3);
background-color: white;
padding: 40px 20px;
border-radius: 5px;
}
.separate {
position: relative;
height: 10px;
width: 30px;
top: -35px;
background-color: var(--Cyan);
}
.adittion::after {
content: "";
height: 50px;
width: 50px;
border-radius: 50%;
background-color: var(--Very-Dark-Violet);
position: absolute;
top: -30px;
background-position: center;
background-repeat: no-repeat;
background-size: 55%;
}
.f1::after {
background-image: url(../images/icon-brand-recognition.svg);
}
.f2::after {
background-image: url(../images/icon-detailed-records.svg);
}
.f3::after {
background-image: url(../images/icon-fully-customizable.svg);
}
.f1 {
top: -70px;
}
.f2 {
top: -35px;
}
.f3 {
top: 0px;
}
.title3 {
color: var(--Black);
font-size: 1.8rem;
line-height: 1.8rem;
}
.pre-title3 {
margin-top: 10px;
color: var(--Grayish-Violet);
font-size: 1rem;
line-height: 2vw;
}
.boost-title {
text-align: center;
color: white;
font-size: 3vw;
padding: 0 10px;
}
.boost {
width: 100%;
background-color: var(--Very-Dark-Blue);
background-image: url(../images/bg-boost-desktop.svg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 180px;
margin-top: 100px;
}
.boost-btn {
padding: 8px 30px;
}
footer {
background-color: var(--Very-Dark-Violet);
display: flex;
align-items: center;
justify-content: space-evenly;
flex-direction: column;
padding: 30px 0;
}
footer h2 {
color: white;
position: relative;
top: -10px;
font-size: 1.4rem;
}
footer a {
margin: 0;
font-size: 1.2rem;
min-width: 30px;
}
footer a:hover {
color: var(--Cyan);
}
.wrapper-parent {
display: flex;
align-items: center;
justify-content: space-around;
flex-direction: row;
width: 100%
}
.wrapper {
position: relative;
display: flex;
align-items: flex-start;
justify-content: center;
flex-direction: row;
margin-left: 30px;
}
.wrapper>div:nth-child(2),
.wrapper>div:nth-child(3) {
margin-left: 30px;
}
.wrapper>div {
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-direction: column;
}
.sm {
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
}
.sm>* {
margin: 0 8px;
cursor: pointer;
}
.sm>* path {
transition: 1s;
}
.sm>* path:hover {
fill: var(--Cyan);
}
.rights {
position: relative;
top: 15px;
left: 0;
color: white;
font-size: 1.1rem;
text-align: center;
}
#media screen and (max-width:850px) {
header {
flex-direction: column-reverse;
}
.illustration {
width: 90%;
}
.title {
text-align: center;
font-size: 2.1rem;
line-height: 2.4rem;
}
.added>p {
margin: 0;
}
.pre-title {
text-align: center;
margin-top: 10px;
font-size: 1.1rem;
line-height: 1.3rem;
}
header>* {
width: 100%;
}
.logo:hover {
transform: translateX(5px);
}
.hamburger {
display: flex;
}
.header-side {
margin: 0;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin-top: 10px;
}
.started-btn {
font-size: 0.9rem;
}
.line {
display: flex;
height: 1px;
width: 100%;
background-color: var(--Gray);
}
.desk-ul>*,
.right-side>* {
color: white;
font-size: 1.5rem;
margin: 20px 0;
}
.desk-ul>*:hover {
color: var(--Cyan);
}
.login:hover {
color: var(--Cyan);
}
.desk-ul,
.right-side {
flex-direction: column;
position: absolute;
left: 50%;
margin: 0;
background-color: var(--Black);
transform: translate(-50%, -50%);
width: 90%;
padding: 20px 40px;
border-radius: 10px;
transition: 2s;
}
.sign-btn {
width: 90%;
text-align: center;
}
.desk-ul {
top: -500px;
}
.right-side {
top: -500px;
}
.desk-ul-style {
/*for js style*/
top: 230px;
}
.right-side-style {
top: 450px;
}
.pre-title {
width: 100%;
}
.feautures {
flex-direction: column;
margin-top: 40px;
}
.title2 {
font-size: 2.2rem;
}
.pre-title2 {
font-size: 1.4rem;
line-height: 1.4rem;
}
.separate {
height: 40px;
width: 10px;
position: relative;
top: 0px;
}
.title3 {
font-size: 1.8rem;
}
.pre-title3 {
font-size: 1.1rem;
line-height: normal;
}
.f1,
.f2,
.f3 {
top: 0;
width: 80%;
}
.boost-title {
font-size: 2rem;
}
.boost-btn,
.started-btn {
font-size: 1.2rem;
}
footer {
flex-direction: column;
}
.footer-logo {
top: 0;
left: 0;
}
.wrapper {
margin: 20px 0 0 0;
flex-direction: column;
align-items: center;
}
.wrapper-parent {
flex-direction: column;
}
.wrapper>div:nth-child(2),
.wrapper>div:nth-child(3) {
margin-left: 0;
}
.wrapper>div {
align-items: center;
justify-content: center;
margin: 40px 0 0 0;
}
footer h2 {
font-size: 1.6rem;
}
footer a {
font-size: 1.2rem;
}
.sm {
margin: 30px 0 0 0;
}
.rights {
font-size: 1.2rem;
top: 30px;
left: 0;
padding-bottom: 30px;
}
}
#media screen and (max-width:500px) {
.input-div {
flex-direction: column;
}
.shorten-btn {
margin-top: 5px;
width: 100%;
margin-left: 0;
}
.title2 {
line-height: 2.2rem;
}
.pre-title2 {
margin-top: 10px;
}
.alert-div {
width: 100%;
top: 5px;
}
.boost-btn {
margin-top: 10px;
}
.title3 {
line-height: 2rem;
}
.input {
width: 100%;
}
.added {
flex-direction: column;
}
.added>div {
flex-direction: column;
}
.feature {
width: 100%;
}
}
<!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">
<link rel="icon" href="images/favicon-32x32.png">
<link rel="stylesheet" href="../WOW-master/css/libs/animate.css">
<link rel="stylesheet" href="style/style.css">
<title>Frontend Mentor | Shortly URL shortening API Challenge</title>
</head>
<body>
<!---------------------- nav start ---------------------->
<nav class="wow fadeIn">
<div class="left-side">
<img src="images/logo.svg" alt="#" class="logo">
<ul class="desk-ul">
<li>Feautures</li>
<li>Pricing</li>
<li>Resources</li>
</ul>
</div>
<div class="right-side">
<div class="line"></div>
Login
Sign Up
</div>
<img class="hamburger" src="images/bars-solid.svg" alt="#">
</nav>
<!---------------------- nav end ---------------------->
<!---------------------- header start ---------------------->
<header>
<div class="header-side">
<h1 class="title wow bounceInUp">More than just shorter links</h1>
<p class="pre-title wow wobble">Build your brand’s recognition and get detailed insights on how your links
are
performing.</p>
<button class="started-btn exc wow bounceIn" data-wow-delay="0.5s">Get Started</button>
</div>
<img class="illustration wow flipInX" src="images/illustration-working.svg" alt="#">
</header>
<!---------------------- header end ---------------------->
<!---------------------- section start ---------------------->
<section>
<div class="container">
<div class="input-div wow fadeIn">
<div class="alert-div">
<input type="url" placeholder="Shorten a link here ..." class="input">
<i class="alert-i">Please add a link</i>
</div>
<button class="exc input-btn shorten-btn">Shorten It!</button>
</div>
<div class="added added-template wow bounce">
<p>see your website link</p>
<div>
https://shrtco.de/??????
<button class="exc copy-btn input-btn">Copy</button>
</div>
</div>
</div>
<div class="advanced-stats-main">
<h2 class="title2 wow bounceInLeft">Advanced Statistics</h2>
<p class="pre-title2 wow fadeInRight">Track how your links are performing across the
web with our advanced statistics
dashboard</p>
</div>
<div class="feautures">
<div class="feature adittion f1 wow flipInX">
<h3 class="title3">Brand Recognition</h3>
<p class="pre-title3">Boost your brand recognition with each click. Generic links don’t mean a thing.
Branded links help instil confidence in your content.</p>
</div>
<div class="separate wow fadeIn" data-wow-delay="1s"></div>
<div class="feature adittion f2 wow flipInY">
<h3 class="title3">Detailed Records</h3>
<p class="pre-title3">Gain insights into who is clicking your links. Knowing when and where people
engage with your content helps inform better decisions.</p>
</div>
<div class="separate wow fadeIn" data-wow-delay="1s"></div>
<div class="feature adittion f3 wow flipInX">
<h3 class="title3">Fully Customizable</h3>
<p class="pre-title3">Improve brand awareness and content discoverability through customizable links,
supercharging audience engagement.</p>
</div>
</div>
<div class="boost">
<h2 class="title2 boost-title wow bounceInUp">Boost your links today</h2>
<button class="exc started-btn boost-btn wow bounceIn" data-wow-delay="0.5s">Get Started</button>
</div>
</section>
<!---------------------- section end ---------------------->
<!---------------------- footer start ---------------------->
<footer class="wow fadeIn">
<div class="wrapper-parent">
<svg class="footer-logo" xmlns="http://www.w3.org/2000/svg" width="121" height="33">
<path fill="#FFFFFF"
d="M16.715 7.932c-.068-.09-.306-.26-.714-.51s-.918-.51-1.53-.782-1.281-.51-2.006-.714a8.005 8.005 0 00-2.176-.306c-1.995 0-2.992.669-2.992 2.006 0 .408.107.748.323 1.02.215.272.532.516.952.731.419.215.946.414 1.58.595l1.406.393.805.219c1.156.317 2.198.663 3.128 1.037.929.374 1.717.839 2.363 1.394a5.647 5.647 0 011.496 2.023c.35.793.527 1.745.527 2.856 0 1.36-.255 2.51-.765 3.451-.51.94-1.185 1.7-2.023 2.278-.84.578-1.802.997-2.89 1.258-1.088.26-2.21.391-3.366.391a19.68 19.68 0 01-5.44-.799c-.884-.26-1.74-.572-2.567-.935A14.358 14.358 0 01.53 22.28l2.448-4.862c.09.113.385.329.884.646.498.317 1.116.635 1.853.952.736.317 1.558.6 2.465.85.906.25 1.824.374 2.754.374 1.972 0 2.958-.6 2.958-1.802 0-.453-.148-.827-.442-1.122-.295-.295-.703-.561-1.224-.799a12.455 12.455 0 00-1.504-.56l-1.702-.495-.976-.288c-1.111-.34-2.074-.708-2.89-1.105-.816-.397-1.49-.856-2.023-1.377a5.003 5.003 0 01-1.19-1.802c-.261-.68-.391-1.473-.391-2.38 0-1.27.238-2.391.714-3.366a7.266 7.266 0 011.938-2.465 8.435 8.435 0 012.839-1.513c1.076-.34 2.215-.51 3.417-.51.838 0 1.666.08 2.482.238.816.159 1.598.363 2.346.612.748.25 1.445.533 2.09.85.647.317 1.242.635 1.786.952l-2.448 4.624zM40.139 25h-5.44V14.97c0-1.156-.227-2.006-.68-2.55-.454-.544-1.077-.816-1.87-.816-.318 0-.663.074-1.037.221a4.173 4.173 0 00-1.088.646 5.827 5.827 0 00-.97 1.003 4.4 4.4 0 00-.68 1.292V25h-5.44V.18h5.44v9.962a6.786 6.786 0 012.602-2.465c1.076-.578 2.26-.867 3.553-.867 1.201 0 2.17.21 2.907.629.736.42 1.303.952 1.7 1.598.396.646.663 1.371.799 2.176.136.805.204 1.592.204 2.363V25zm12.34.34c-1.519 0-2.873-.25-4.063-.748-1.19-.499-2.193-1.173-3.01-2.023a8.54 8.54 0 01-1.852-2.958 9.97 9.97 0 01-.63-3.519c0-1.224.21-2.397.63-3.519a8.54 8.54 0 011.853-2.958c.816-.85 1.819-1.53 3.009-2.04s2.544-.765 4.063-.765c1.519 0 2.867.255 4.046.765 1.179.51 2.176 1.19 2.992 2.04a8.754 8.754 0 011.87 2.958 9.736 9.736 0 01.646 3.519 9.97 9.97 0 01-.63 3.519 8.54 8.54 0 01-1.852 2.958c-.816.85-1.82 1.524-3.01 2.023-1.19.499-2.543.748-4.062.748zM48.5 16.092c0 1.405.374 2.533 1.122 3.383.748.85 1.7 1.275 2.856 1.275a3.59 3.59 0 001.564-.34c.476-.227.89-.544 1.24-.952a4.57 4.57 0 00.834-1.479 5.632 5.632 0 00.306-1.887c0-1.405-.374-2.533-1.122-3.383-.748-.85-1.689-1.275-2.822-1.275a3.702 3.702 0 00-2.84 1.292 4.57 4.57 0 00-.832 1.479 5.632 5.632 0 00-.306 1.887zm27.776-4.284c-1.315.023-2.505.238-3.57.646-1.065.408-1.836 1.02-2.312 1.836V25h-5.44V7.15h4.998v3.604c.612-1.201 1.4-2.142 2.363-2.822.963-.68 1.989-1.031 3.077-1.054h.544c.113 0 .227.011.34.034v4.896zm14.074 12.24a21.71 21.71 0 01-2.567.884c-.963.272-1.932.408-2.907.408-.68 0-1.32-.085-1.92-.255a4.286 4.286 0 01-1.582-.816c-.453-.374-.81-.867-1.07-1.479-.262-.612-.392-1.349-.392-2.21v-9.316h-2.278V7.15h2.278V1.472h5.44V7.15h3.638v4.114h-3.638v7.446c0 .59.147 1.014.442 1.275.295.26.669.391 1.122.391.408 0 .827-.068 1.258-.204.43-.136.805-.283 1.122-.442l1.054 4.318zM92.627.18h5.44v18.462c0 1.36.578 2.04 1.734 2.04.272 0 .572-.04.901-.119.329-.08.63-.198.901-.357l.714 4.08c-.68.317-1.462.567-2.346.748-.884.181-1.711.272-2.482.272-1.564 0-2.765-.408-3.604-1.224-.839-.816-1.258-1.995-1.258-3.536V.18zm11.456 27.506c.454.159.879.272 1.275.34a6.4 6.4 0 001.071.102c.658 0 1.168-.227 1.53-.68.363-.453.692-1.27.986-2.448l-6.8-17.85h5.61l4.148 13.192 3.57-13.192h5.1l-6.8 20.74a7.106 7.106 0 01-2.55 3.587c-1.224.918-2.674 1.377-4.352 1.377a8.17 8.17 0 01-1.377-.119 7.516 7.516 0 01-1.41-.391v-4.658z" />
</svg>
<div class="wrapper">
<div>
<h2>Feautures</h2> Link ShorteningBranded LinksAnalytics
</div>
<div>
<h2>Resources</h2> BlogDevelopersSupport Company
</div>
<div>
<h2>Company</h2>AboutOur TeamCareersContact
</div>
</div>
<div class="sm">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
<path fill="#FFF"
d="M22.675 0H1.325C.593 0 0 .593 0 1.325v21.351C0 23.407.593 24 1.325 24H12.82v-9.294H9.692v-3.622h3.128V8.413c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12V24h6.116c.73 0 1.323-.593 1.323-1.325V1.325C24 .593 23.407 0 22.675 0z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="20">
<path fill="#FFF"
d="M24 2.557a9.83 9.83 0 01-2.828.775A4.932 4.932 0 0023.337.608a9.864 9.864 0 01-3.127 1.195A4.916 4.916 0 0016.616.248c-3.179 0-5.515 2.966-4.797 6.045A13.978 13.978 0 011.671 1.149a4.93 4.93 0 001.523 6.574 4.903 4.903 0 01-2.229-.616c-.054 2.281 1.581 4.415 3.949 4.89a4.935 4.935 0 01-2.224.084 4.928 4.928 0 004.6 3.419A9.9 9.9 0 010 17.54a13.94 13.94 0 007.548 2.212c9.142 0 14.307-7.721 13.995-14.646A10.025 10.025 0 0024 2.557z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
<path fill="#FFF"
d="M12 0C5.373 0 0 5.372 0 12c0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738a.36.36 0 01.083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.631-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146C9.57 23.812 10.763 24 12 24c6.627 0 12-5.373 12-12 0-6.628-5.373-12-12-12z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
<path fill="#FFF"
d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z" />
</svg>
</div>
</div>
<p class="rights">©Okba All Rights Reserved.</p>
</footer>
<!---------------------- footer end ---------------------->
<script src="script/script.js"></script>
<script src="../WOW-master/dist/wow.min.js"></script>
<script>
new WOW().init();
</script>
</body>
</html>
this is how it looks on Firefox
this is how it looks on Edge and I want it like this
Please help, thanks!
thank to Steve i found the answer, which is: to define a (width: 50%) to the left div that contains the title, paragraph and the button.
This question already has answers here:
How can I position my div at the bottom of its container?
(25 answers)
Closed 10 months ago.
I want to keep the button at bottom previously which I was making it possible by writing more text to push it to bottom but it wasn't responsive for every device any way I can keep the button in a div at bottom?
:root {
--clr-primary: #651fff;
--clr-gray: #37474f;
--clr-gray-light: #b0bec5;
}
* {
box-sizing: border-box;
font-family: "Open Sans", sans-serif;
margin: 0;
padding: 0;
}
body {
color: var(--clr-gray);
margin: 2rem;
}
.wrapper-grid {
display: grid;
grid-template-columns: repeat(auto-fit, 20rem);
justify-content: center;
}
.container {
overflow: hidden;
box-shadow: 0px 2px 8px 0px var(--clr-gray-light);
background-color: white;
text-align: center;
border-radius: 1rem;
position: relative;
margin: 2rem 0.5rem;
}
.banner-img {
position: absolute;
background-image: url(https://gaito.000webhostapp.com/im/istockphoto-1307289824-640x640.jpg);
height: 10rem;
width: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.profile-img {
width: 8rem;
clip-path: circle(60px at center);
margin-top: 4.5rem;
height: 8rem;
}
.name {
font-weight: bold;
font-size: 1.5rem;
}
.description {
margin: 1rem 2rem;
font-size: 0.9rem;
}
.btn {
width: 100%;
border: none;
font-size: 1rem;
font-weight: bold;
color: white;
padding: 1rem;
background-color: var(--clr-primary);
}
<div class="wrapper-grid">
<div class="container">
<div class='banner-img'></div>
<img src='https://i.pinimg.com/originals/49/09/f9/4909f9e82c492b1e4d52c2bcd9daaf97.jpg' class="profile-img">
<h1 class="name">Slime</h1>
<p class="description">Slimes also commonly called ooze are common types of</p>
<button class='btn'>Attack this dungeon </button>
</div>
<div class="container">
<div class='banner-img'></div>
<img src='https://static.wikia.nocookie.net/kumo-desu-ga-nani-ka/images/4/4c/Mother_1.png/' alt='profile image' class="profile-img">
<h1 class="name">Gaint spider</h1>
<p class="description">This creature shoots sticky strands of webbing from its abdomen which are most commonly found underground, making their lairs on ceilings or in dark, web-filled crevices.</p>
<button class='btn'>Attack this dungeon </button>
</div>
</div>
Codepen
My solution would be:
.container {
display: flex;
flex-flow: column nowrap; /* Flex everything inside your cards vertically */
}
.description {
flex-grow: 1;
/*
When a card has more space (because another card is taller
with more info) - grow the description
*/
}
Here is a working snippet, click Full page top right to see it working:
:root {
--clr-primary: #651fff;
--clr-gray: #37474f;
--clr-gray-light: #b0bec5;
}
* {
box-sizing: border-box;
font-family: "Open Sans", sans-serif;
margin: 0;
padding: 0;
}
body {
color: var(--clr-gray);
margin: 2rem;
}
.wrapper-grid {
display: grid;
grid-template-columns: repeat(auto-fit, 20rem);
justify-content: center;
}
.container {
overflow: hidden;
display: flex;
flex-flow: column nowrap;
align-items: center;
box-shadow: 0px 2px 8px 0px var(--clr-gray-light);
background-color: white;
text-align: center;
border-radius: 1rem;
position: relative;
margin: 2rem 0.5rem;
}
.banner-img {
position: absolute;
background-image: url(https://gaito.000webhostapp.com/im/istockphoto-1307289824-640x640.jpg);
height: 10rem;
width: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.profile-img {
width: 8rem;
clip-path: circle(60px at center);
margin-top: 4.5rem;
height: 8rem;
}
.name {
font-weight: bold;
font-size: 1.5rem;
}
.description {
flex-grow: 1;
margin: 1rem 2rem;
font-size: 0.9rem;
}
.btn {
width: 100%;
border: none;
font-size: 1rem;
font-weight: bold;
color: white;
padding: 1rem;
background-color: var(--clr-primary);
}
<div class="wrapper-grid">
<div class="container">
<div class='banner-img'></div>
<img src='https://i.pinimg.com/originals/49/09/f9/4909f9e82c492b1e4d52c2bcd9daaf97.jpg' class="profile-img">
<h1 class="name">Slime</h1>
<p class="description">Slimes also commonly called ooze are common types of</p>
<button class='btn'>Attack this dungeon </button>
</div>
<div class="container">
<div class='banner-img'></div>
<img src='https://static.wikia.nocookie.net/kumo-desu-ga-nani-ka/images/4/4c/Mother_1.png/' alt='profile image' class="profile-img">
<h1 class="name">Gaint spider</h1>
<p class="description">This creature shoots sticky strands of webbing from its abdomen which are most commonly found underground, making their lairs on ceilings or in dark, web-filled crevices.</p>
<button class='btn'>Attack this dungeon </button>
</div>
</div>
I'm new to this. I'm trying to make a webpage with 100vh height, where the header and footer will take 80px and 50px respectively. Whatever space is left in middle should be taken over by a grid container completely. I did succeed so far, but the middle container is taking only as much as its content needs. Please see the below image for refrence:
Also, I was under the impression that the footer tag will put the section at the bottom of the viewport automatically. But that's not happening either. Do I have to use absolute positioning?
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
html {
font-size: 10px;
}
body {
height: 100vh;
overflow-x: hidden;
}
.container {
max-width: 1400px;
margin: 0 auto;
}
header {
padding-left: 40px;
padding-right: 40px;
}
nav {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
min-height: 80px;
}
.nav-menuList {
display: inline-flex;
justify-content: space-between;
align-items: center;
gap: 4rem;
}
.nav-list {
list-style-type: none;
font-family: sans-serif;
font-size: 1.4rem;
font-weight: 500;
line-height: 4.4rem;
color: #000;
}
.grid-container {
display: grid;
grid-template-rows: 1fr 1fr;
row-gap: 4rem;
grid-template-areas:
"h1"
"h-btn";
padding: 0 40px;
align-self: center;
}
h1 {
font-family: sans-serif;
font-size: 4.8rem;
font-weight: 300;
line-height: 6.4rem;
color: #000;
grid-area: h1;
width: 75%;
}
.button-group {
grid-area: h-btn;
}
footer {
padding: 0 40px;
}
<body>
<div class="container">
<header>
<nav>
<div class="logo">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 4C0 1.79086 1.79086 0 4 0H28C30.2091 0 32 1.79086 32 4V28C32 30.2091 30.2091 32 28 32H4C1.79086 32 0 30.2091 0 28V4Z" fill="black" />
</svg>
</div>
<div class="menu">
<ul class="nav-menuList">
<li class="nav-list">menu</li>
<li class="nav-list">menu</li>
<li class="nav-list">menu</li>
</ul>
</div>
</nav>
</header>
<main>
<div class="grid-container">
<h1>Lorem ipsum dolor sit amet</h1>
<div class="button-group">
<button class="primary-btn hero-btn">CTA</button>
</div>
</div>
</main>
<footer>This is footer</footer>
</div>
</body>
Flexbox solution:
Apply to the body or the flexbox container: min-height: 100vh;.
Apply to the header: height: 80px; and to the footer: height: 50px;.
Make the main or content-box consume the remaining space by adding: flex-grow: 1;
body {
display: flex;
flex-direction: column;
height: 100vh;
}
header {
height: 80px;
}
footer {
height: 50px;
}
main {
flex-grow: 1;
}
/* for demonstration purpose only */
body {
margin: 0;
}
header,
footer,
main {
display: flex;
justify-content: center;
align-items: center;
}
header {
background-color: pink;
}
main {
background-color: lightblue;
}
footer {
background-color: lightgreen;
}
<header>Header</header>
<main>Content</main>
<footer>Footer</footer>
CSS-Grid solution:
Apply to the body or the grid-container: min-height: 100vh;
Define the rows: grid-template-rows: 80px auto 50px; which means that auto will consume all remaining space.
body {
height: 100vh;
display: grid;
grid-template-rows: 80px auto 50px;
}
/* for demonstration purpose only */
body {
margin: 0;
}
header,
footer,
main {
display: flex;
justify-content: center;
align-items: center;
}
header {
background-color: pink;
}
main {
background-color: lightblue;
}
footer {
background-color: lightgreen;
}
<header>Header</header>
<main>Content</main>
<footer>Footer</footer>
You can set .container also as grid :
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
html {
font-size: 10px;
}
body {
height: 100vh;
overflow-x: hidden;
}
.container {
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-rows: minmax(80px, max-content) 1fr minmax(50px,max-content);
height: 100%;
}
header {
padding-left: 40px;
padding-right: 40px;
}
nav {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
min-height: 80px;
}
.nav-menuList {
display: inline-flex;
justify-content: space-between;
align-items: center;
gap: 4rem;
}
.nav-list {
list-style-type: none;
font-family: sans-serif;
font-size: 1.4rem;
font-weight: 500;
line-height: 4.4rem;
color: #000;
}
.grid-container {
display: grid;
grid-template-rows: 1fr 1fr;
row-gap: 4rem;
grid-template-areas:
"h1"
"h-btn";
padding: 0 40px;
align-self: center;
}
h1 {
font-family: sans-serif;
font-size: 4.8rem;
font-weight: 300;
line-height: 6.4rem;
color: #000;
grid-area: h1;
width: 75%;
}
.button-group {
grid-area: h-btn;
}
footer {
padding: 0 40px;
}
<body>
<div class="container">
<header>
<nav>
<div class="logo">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 4C0 1.79086 1.79086 0 4 0H28C30.2091 0 32 1.79086 32 4V28C32 30.2091 30.2091 32 28 32H4C1.79086 32 0 30.2091 0 28V4Z" fill="black" />
</svg>
</div>
<div class="menu">
<ul class="nav-menuList">
<li class="nav-list">menu</li>
<li class="nav-list">menu</li>
<li class="nav-list">menu</li>
</ul>
</div>
</nav>
</header>
<main>
<div class="grid-container">
<h1>Lorem ipsum dolor sit amet</h1>
<div class="button-group">
<button class="primary-btn hero-btn">CTA</button>
</div>
</div>
</main>
<footer>This is footer</footer>
</div>
</body>
So basically I am trying to create nice splash page and the designer wants the links diagonal, circular, and all the same size, the <p>'s are gonna be links, but how can I make them all diagonal and all the same size circle?
I have tried a lot of different flexbox combinations I haven't tried CSS grid yet, that is going to be what I try next.
/*variable declarations*/
:root {
--teal: #37C8AB;
--white: #ffffff;
--black: #000000;
--lilac: #B380FF;
--purple: #7137C8;
--aqua: #008066;
}
/*page body*/
body {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.page-container {
background: var(--lilac);
margin-top: 10px;
padding-bottom: 5em;
padding-left: 2em;
padding-top: 5.8em;
}
/*Text Conatiner*/
.tcontainer-frame {
background: var(--purple);
border: var(--black) 2px solid;
display: flex;
justify-content: center;
align-items: center;
padding: 1em;
}
.tcontainer {
background: var(--black);
font-size: 24px;
padding: 12em 1em;
text-align: center;
}
.teal-font {
color: var(--teal);
}
/*Link container*/
.link-container {
display: flex;
flex-flow: column wrap;
padding: 4em;
text-align: center;
}
#newSolCircle {
align-items: center;
align-self: flex-start;
background: var(--teal);
border-radius: 100%;
display: flex;
flex: 1 1 0;
justify-content: center;
margin: 2em;
padding: 1em;
}
#patronCircle {
align-items: center;
align-self: center;
background: var(--aqua);
border-radius: 100%;
display: flex;
flex: 1 1 0;
margin: 2em;
padding: 1em;
}
#alchemistCircle {
align-items: center;
align-self: flex-end;
background: var(--purple);
border-radius: 100%;
display: flex;
flex: 1 1 0;
margin: 2em;
padding: 1em;
}
<body class="bg-dark">
<div class="container-fluid page-container">
<div class="row">
<div class="col-6 tcontainer-frame">
<div class="tcontainer"><span class="teal-font">Hello. You have landed on the Image Alchemists' web portal. We
welcome
you. Please make your
selection to the right.</span>
</div>
</div>
<div class="col-6 link-container">
<div id="newSolCircle">
<p>New Solicitor</p>
</div>
<div id="patronCircle">
<p>Patron</p>
</div>
<div id="alchemistCircle">
<p>Alchemist</p>
</div>
</div>
</div>
</div>
</body>
I am just hoping to get those 3 circles to all line up correctly and have them all be the same width and height. Thanks in advance for anyone's help.
Including width and height was necessary to make them of the same size and in circle shape.
Then i removed flex: 1 1 0; as the align-items property alone was solving the problem along with the width and height.
:root {
--teal: #37C8AB;
--white: #ffffff;
--black: #000000;
--lilac: #B380FF;
--purple: #7137C8;
--aqua: #008066;
}
/*page body*/
body {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.page-container {
background: var(--lilac);
margin-top: 10px;
padding-bottom: 5em;
padding-left: 2em;
padding-top: 5.8em;
}
/*Text Conatiner*/
.tcontainer-frame {
background: var(--purple);
border: var(--black) 2px solid;
display: flex;
justify-content: center;
align-items: center;
padding: 1em;
}
.tcontainer {
background: var(--black);
font-size: 24px;
padding: 12em 1em;
text-align: center;
}
.teal-font {
color: var(--teal);
}
/*Link container*/
.link-container {
display: flex;
flex-flow: column wrap;
padding: 4em;
text-align: center;
}
.circle {
border-radius: 100%;
display: flex;
height: 50px;
width: 50px;
margin: 2em;
padding: 1em;
justify-content: center;
}
#newSolCircle {
align-items: center;
align-self: flex-start;
background: var(--teal);
}
#patronCircle {
align-items: center;
align-self: center;
background: var(--aqua);
}
#alchemistCircle {
align-items: center;
align-self: flex-end;
background: var(--purple);
}
<body class="bg-dark">
<div class="container-fluid page-container">
<div class="row">
<div class="col-6 tcontainer-frame">
<div class="tcontainer"><span class="teal-font">Hello. You have landed on the Image Alchemists' web portal. We
welcome
you. Please make your
selection to the right.</span>
</div>
</div>
<div class="col-6 link-container">
<div id="newSolCircle" class="circle">
<p>New Solicitor</p>
</div>
<div id="patronCircle" class="circle">
<p>Patron</p>
</div>
<div id="alchemistCircle" class="circle">
<p>Alchemist</p>
</div>
</div>
</div>
</div>
</div>
</body>
Try this
/*variable declarations*/
:root {
--teal: #37C8AB;
--white: #ffffff;
--black: #000000;
--lilac: #B380FF;
--purple: #7137C8;
--aqua: #008066;
}
/*page body*/
body {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.page-container {
background: var(--lilac);
margin-top: 10px;
padding-bottom: 5em;
padding-left: 2em;
padding-top: 5.8em;
}
/*Text Conatiner*/
.tcontainer-frame {
background: var(--purple);
border: var(--black) 2px solid;
display: flex;
justify-content: center;
align-items: center;
padding: 1em;
}
.tcontainer {
background: var(--black);
font-size: 24px;
padding: 12em 1em;
text-align: center;
}
.teal-font {
color: var(--teal);
}
/*Link container*/
.link-container {
display: flex;
flex-flow: column wrap;
padding: 4em;
text-align: center;
}
.circle {
align-items: center;
align-self: flex-start;
background: var(--teal);
border-radius: 100%;
display: flex;
/* flex: 1 1 0; */
justify-content: center;
/* margin: 2em;
padding: 1em; */
height: 150px;
width: 150px;
}
#newSolCircle {
display: flex;
justify-content: flex-start;
}
#patronCircle {
display: flex;
justify-content: center;
}
#patronCircle .circle {
background: var(--aqua);
}
#alchemistCircle {
display: flex;
justify-content: flex-end;
}
#alchemistCircle .circle {
background: var(--purple);
}
<body class="bg-dark">
<div class="container-fluid page-container">
<div class="row">
<div class="col-6 tcontainer-frame">
<div class="tcontainer"><span class="teal-font">Hello. You have landed on the Image Alchemists' web portal. We
welcome
you. Please make your
selection to the right.</span>
</div>
</div>
<div class="col-6">
<div class="link-container">
<div id="newSolCircle">
<p class="circle">New Solicitor</p>
</div>
<div id="patronCircle">
<p class="circle">Patron</p>
</div>
<div id="alchemistCircle">
<p class="circle">Alchemist</p>
</div>
</div>
</div>
</div>
</div>
</body>