I have two buttons that have different width values because the content is different. My desire result is to have the same width on both buttons.
Fiddle
HTML:
<div class="options ion-text-center">
<div class="option-container" (click)="newScenario()" style="cursor: pointer;">
<div class="option">
<img src="assets/icons/scenario.svg" class="option-icon">
<label class="option-text">Create scenario</label>
</div>
</div>
<div class="option-container" (click)="goToHistory()" style="cursor: pointer;">
<div class="option">
<img src="assets/icons/scenario.svg" class="option-icon">
<label class="option-text">History</label>
</div>
</div>
</div>
CSS:
.options {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 15em;
margin-top: 6em;
grid-template-columns: auto auto;
justify-items: center;
float: right;
.option-container {
width: 100%;
text-align: center;
display: flex;
border-radius: 12px;
justify-content: right;
.option {
background-color: #49515C;
// width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem 2rem;
border-radius: 12px;
filter: drop-shadow(0px 8px 20px rgba(0, 0, 0, 0.4));
.option-icon {
filter: invert(100%) sepia(4%) saturate(7500%) hue-rotate(180deg) brightness(109%) contrast(122%);
width: 45px;
height: 45px;
}
.option-text {
font-size: 20px;
font-weight: 600;
color: #ffffff;
padding-left: 10px;
font-family: "Exo 2", sans-serif;
}
}
}
.option-container:nth-child(2) {
justify-content: left;
}
}
The first thing I try is to set option class to width: 100%; but both buttons get bigger and I want to keep the current "Create Scenario" button.
My second try was to adjust "History button" as &__justify-content {width: 41%;} but this does not work on responsive layout.
How can I achieve this?
I think you're looking for this two css properties:
overflow: hidden;
white-space: nowrap;
Related
I'm trying to figure out how to make it look like this (the white box at the end of both sides is basically the continuation of the search-box):
I tried different ways to make it equally long on both left and right sides (to center it under my title) but unfortunately it always resulted in failure. The left side didn't move and the right side just became wider.
I'm looking as well for a way to add some space between the arrow icon and the right border of the search-box. I tried adding some padding but it didn't work.
.help-container {
padding: 5rem 0;
display: grid;
place-content: center;
background-color: #dadbf1;
}
h1 {
font-size: 5rem;
font-weight: 500;
padding-bottom: 2rem;
}
.search {
width: 100%;
position: relative;
display: flex;
}
.searchTerm {
width: 100%;
border: 1px solid #000000;
padding: 5px;
height: 45px;
border-radius: 0.25rem;
outline: none;
color: #9dbfaf;
font-size: 1rem;
background-image: url("https://svgur.com/i/qJh.svg");
background-repeat: no-repeat;
background-position: right center;
background-size: 30px;
}
<section>
<div class="help-container">
<div class="help">
<h1>How can we help?</h1>
<div class="search">
<input type="text" class="searchTerm" placeholder="Search" />
</div>
</div>
</div>
</section>
https://codepen.io/686579/pen/zYJYPWB
You are trying to make the search bigger than the nodes/elements that contain it.
Make sure to set the width of the containing components to something bigger.
To center using display: flex;, you can set a container to use flex, and then use margin: auto; in the child element to automatically center with the containing-flexed-element.
Here is updated html that gives a class to each container. Notice I added class="search-background" so I can give that element a width.
example.html
<section>
<div class="help-container">
<div class="help">
<h1>How can we help?</h1>
<div class="search-background" style="background-color: white;">
<div class="search">
<input type="text" class="searchTerm" placeholder="Search" />
</div>
</div>
</div>
</div>
</section>
Here is updated css with display flex on all containing elements (and flex direction of column so that things are displayed vertically, display flex defaults to horizontal)
Containers have display: flex;, centered items have margin: auto;
You can customize the actual widths of each element to your desire. Use margin to adjust the element right or left. margin "auto" just tells it to fill the difference between the parent and child element's width.
example.css
.help-container {
padding: 5rem 0;
display: grid;
place-content: center;
background-color: #dadbf1;
width: 100%;
display: flex;
border: 1px solid green;
}
.help {
width: 100%;
display: flex;
flex-direction: column;
border: 1px solid red;
}
h1 {
font-size: 5rem;
font-weight: 500;
padding-bottom: 2rem;
width: fit-content;
margin: auto;
}
.search-background {
width: 80%;
margin: auto;
display: flex;
flex-direction: column;
}
.search {
position: relative;
display: flex;
width: 100%;
margin: auto;
}
.searchTerm {
width: 100%;
border: 1px solid #000000;
padding: 5px;
height: 45px;
border-radius: 0.25rem;
outline: none;
color: #9dbfaf;
font-size: 1rem;
background-image: url("https://svgur.com/i/qJh.svg");
background-repeat: no-repeat;
background-position: right center;
background-size: 30px;
}
Here's a screenshot of it on my machine. The red border is only there to help visualize the container needed to be adjusted.
You may add this rule to the .search container:
.search::before {
position: absolute;
width: calc(100% - (2 * 3em));
height: var(--height);
padding: var(--padding);
content: '';
left: 50%;
transform: translateX(-50%);
background: white;
z-index: 1;
}
So that you have a pseudo element bound to the <input> container that will be positioned absolute while having width: 100% minus an arbitrary amount being your padding.
I also zeroed the padding/margin on html, body and used custom variables to hold the padding and height you are using on your input so that it will be replicated on the pseudo element.
This long route was required to have a separated element to style with different criteria using css alone.
html, body{
padding: 0;
margin: 0;
}
.help-container {
padding: 5rem 0;
display: grid;
place-content: center;
background-color: #dadbf1;
}
h1 {
font-size: 5rem;
font-weight: 500;
padding-bottom: 2rem;
}
.search {
--height: 45px;
--padding: 5px;
width: 100%;
/*position: relative;*/
display: flex;
}
.searchTerm {
height: var(--height);
padding: var(--padding);
z-index: 2;
width: 100%;
border: 1px solid #000000;
border-radius: 0.25rem;
outline: none;
color: #9dbfaf;
font-size: 1rem;
background-image: url("https://svgur.com/i/qJh.svg");
background-repeat: no-repeat;
background-position: right center;
background-size: 30px;
}
.search::before {
position: absolute;
width: calc(100% - (2 * 3em));
height: var(--height);
padding: var(--padding);
content: '';
left: 50%;
transform: translateX(-50%);
background: white;
z-index: 1;
}
<section>
<div class="help-container">
<div class="help">
<h1>How can we help?</h1>
<div class="search">
<input type="text" class="searchTerm" placeholder="Search" />
</div>
</div>
</div>
</section>
I added a div before searchbar with an inline CSS to let you see what I added, and deleted width: 100% in searchbar. That is why it was not centered
.help-container {
padding: 5rem 0;
display: grid;
place-content: center;
background-color: #dadbf1;
}
h1 {
font-size: 5rem;
font-weight: 500;
padding-bottom: 2rem;
}
.search {
padding: 0 50px;
position: relative;
display: flex;
}
.searchTerm {
width: 100%;
border: 1px solid #000000;
padding: 5px;
height: 45px;
border-radius: 0.25rem;
outline: none;
color: #9dbfaf;
font-size: 1rem;
background-image: url("https://svgur.com/i/qJh.svg");
background-repeat: no-repeat;
background-position: right center;
background-size: 30px;
}
<section>
<div class="help-container">
<div class="help">
<h1>How can we help?</h1>
<div style="background-color: white;">
<div class="search">
<input type="text" class="searchTerm" placeholder="Search" />
</div>
</div>
</div>
</div>
</section>
You can change your input width for 80% instead 100% and use justify-content to center the input and for adding a white space in your bg-input try using percentages instead right. If you want to know more about it check how to use background-position.
.help-container {
padding: 5rem 0;
display: grid;
place-content: center;
background-color: #dadbf1;
}
h1 {
font-size: 5rem;
font-weight: 500;
padding-bottom: 2rem;
}
.search {
width: 100%;
position: relative;
display: flex;
background-color: white;
justify-content: center;
}
.searchTerm {
width: 80%;
border: 1px solid #000000;
padding: 5px;
height: 45px;
border-radius: 0.25rem;
outline: none;
color: #9dbfaf;
font-size: 1rem;
background-image: url('https://svgur.com/i/qJh.svg');
background-repeat: no-repeat;
background-position: 95% center;
background-size: 30px;
}
<section>
<div class="help-container">
<div class="help">
<h1>How can we help?</h1>
<div class="search">
<input type="text" class="searchTerm" placeholder="Search" />
</div>
</div>
</div>
</section>
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 have a block element (class "blockWrap" in the example code) which contains a nested grid (class "optionsUnderDialogue").
I can't figure out why giving the grid the CSS property "grid-template-columns: 1fr 1fr 1fr;" stretches the width of the entire block. I would expect the space to be divided into three fractions that have no effect on the width of the parent.
Here is the demo in Codepen (simply uncomment the grid-template-columns: 1fr 1fr 1fr; line to observe the issue):
https://codepen.io/noip/pen/oNdgqBj
The HTML code:
<div class="blockWrap">
<div class="contentWrap">
<div style="display: flex; align-items:center; justify-content: center;">
<div class="topConnectionSocket">o</div>
</div>
<div id="id0" class="block">
<div style="text-align: left;">
<span style="width: 15%; display:inline-block; text-align: right;">ID:</span><input class="next"
style="width: 15%; display:inline-block;" type="number">
</div>
<input type="text" class="elementInfoField" placeholder="character name">
<select name="blockType" class="selectBlockType">
<option value="line">Line</option>
<option value="question">Question</option>
<option value="fight">Fight</option>
</select>
<textarea placeholder="Dialogue" data-autoresize></textarea>
<div class="optionsUnderDialogue" style="text-align: right;">
<div class="option1"></div>
<div class="option2"></div>
<div class="option3">
<span style=" text-align: right;">Next:</span><input class="next"
style="display:inline-block;" type="number">
</div>
</div>
</div>
<div class="plusButtonContainer" style="display: flex; align-items: end; justify-content: center;">
<div class="blockPlusButton">+</div>
</div>
</div><!-- end contentwrap -->
</div><!-- end blockwrap -->
The CSS:
.plus {
font-size: 5rem;
font-weight: bolder;
background-color: crimson;
width: 4rem;
height: 4rem;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
border-radius: 0.5rem;
}
.blockWrap {
position: absolute;
box-sizing: border-box;
}
.block {
min-width: 200px;
background: crimson;
margin: 1rem;
border-radius: 5%;
display: grid;
align-items: center;
justify-content: center;
/* position: absolute; */
box-sizing: border-box;
z-index: 2;
transform-origin: 50% 50%;
overflow: hidden;
padding:15px;
}
.blockPlusButton{
margin-top: -3rem;
border-radius: 50%;
text-align: center;
font-size: 1.5rem;
font-weight: bolder;
width: 2rem;
aspect-ratio: 1;
background-color: #0075ff;
display: flex;
justify-content: center;
align-items: center;
}
.optionsUnderDialogue{
display: grid;
max-width: 100%;
/* grid-template-columns: 1fr 1fr 1fr; */
}
.block input {
background-color: white;
color: black;
border: none;
text-align: center;
}
.block input, .block select, .block textarea {
margin: 0.3rem;
}
.topConnectionSocket {
margin-bottom: -2.2rem;
}
.block input::placeholder {
color: rgb(182, 182, 182);
}
Can you help me out as I'm quite stumped. When I inspect the elements inside the grid columns, I don't see anything that would force things to stretch.
I have a button inside a grid cell whose size is determined by font-size as em and padding as percentage.
I require the text of the button to not wrap.
Initially, I used <button type="button" id="log_out_button" data-action="manual_log_out">log out</button> but this produced an undesired result - it wrapped the text:
log
out
I added white-space: nowrap to the button to fix this but it made the button exceed its parent by 0.5cm, which decentralises my grid by the same amount.
To try fixing this knock-on problem, I changed the button to <input type="button" value="log out" id="log_out_button" data-action="manual_log_out">, to no avail.
I added box-sizing: border-box to the button, to no avail.
I experimented with grid-template-columns: auto auto auto; (third value), trying the various options listed Chrome's dev console, to no avail.
Prior to the navigation being a grid, it was a flexbox that had the same problem.
I want my site scalable so I can't set fixed values i.e. in pixels, and setting the percentage of the cell (grid-template-columns) still results in an offset/decentralisation.
How do I prevent my 'log out' button's text from wrapping and prevent it from exceeding its parent's width, such that I avoid the grid's decentralisation issue?
Problem code:
<html>
<head>
<style type="text/css">
body {
font-family: Arial;
background-color: white;
font-size: 1.5vh;
}
header {
height: 100%;
margin: auto;
height: 10.9%;
width: 100%;
}
nav {
margin: auto;
align-items: center;
justify-content: center;
height: 100%;
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 2.5%;
}
nav a, nav a:visited {
text-decoration: none;
color: black;
}
#user_identity {
display: flex;
justify-content: center;
flex-flow: column;
align-items: flex-end;
}
#navigation_menu_wrapper {
height: 100%;
}
#navigation_menu {
flex: 1;
display: flex;
height: 100%;
align-items: center;
}
#navigation_menu div {
text-align: center;
padding-left: 15px;
padding-right: 15px;
font-size: 1.125em;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: rgb(205, 255, 205);
border-right: 1px solid rgb(157, 189, 157);
}
#navigation_menu a {
display: block;
padding: 7px 12px 7px 12px;
border-radius: 3px;
cursor: pointer;
}
#log_out_wrapper {
display: flex;
justify-content: flex-start;
align-items: center;
height: 100%;
}
#username_label {
font-family: "Optima Bold";
font-size: 1.87em;
color: rgb(72, 160, 72);
}
#permanent_id_label {
font-size: 1em;
color: rgb(146, 146, 146);
font-weight: bold;
margin-left: 9px;
cursor: default;
}
#mobile_menu_control {
display: none;
}
#log_out_button {
padding-top: 7%;
padding-bottom: 8%;
border: none;
border-radius: 3px;
background-color: #8dc49d;
text-align: center;
padding-left: 12%;
padding-right: 12%;
font-size: 1.25em;
cursor: pointer;
}
</style>
</head>
<body>
<div id="wrapper">
<header>
<nav>
<div id="user_identity">
<div id="username_label">texthere</div>
<div id="permanent_id_label">#texthere</div>
</div>
<div id="navigation_menu_wrapper">
<button id="mobile_menu_control">menu</button>
<div id="navigation_menu">
<div>
link1
</div>
<div>
link2
</div>
<div>
link3
</div>
<div>
link4
</div>
<div>
link5
</div>
<div>
link6
</div>
</div>
</div>
<div id="log_out_wrapper">
<input type="button" value="log out" id="log_out_button" data-action="manual_log_out">
</div>
</nav>
</header>
<div id="content_wrapper"></div>
</div>
</body>
</html>
As suggested by commenters, applied the following jQuery/JavaScript fix:
logOutButtonWidth = 0;
$(document).ready(function() {
centraliseHeader();
$(window).resize(function() {
centraliseHeader();
});
});
function centraliseHeader() {
logOutButtonWidth = $("#log_out_button").outerWidth();
$("nav").css({
gridTemplateColumns: "auto auto " + logOutButtonWidth + "px"
});
}
I have a Popular News section where I'm trying to display six news articles in a flex pattern. The problem I'm having is that I cannot get the flex items to be closer together. How do I do that?
EDIT: I've added the entire code for the bottom half.
This is how it currently looks:
This is how I want it to look:
.firstsection {
width: 100%;
height: 100;
}
.firstsection h1 {
color: rgb(255, 255, 255);
display: block;
font-size: 36px;
font-weight: 300;
line-height: 42.0001px;
padding-bottom: 14px;
text-align: center;
}
.firstsection {
display: block;
width: 100%;
height: 400px;
background-color: #414141;
float: left;
}
.bottomheader {
margin-top: 40px;
color: white;
font-size: 40px;
position: relative;
top: -20px;
}
.READMORE {
display: inline;
position: relative;
top: -40px;
left: 642px;
font-size: 16px;
text-align: center;
border: 1px solid white;
height: 50px;
padding: 20px;
}
.pop .READMORE a {
color: white;
text-decoration: none;
}
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
color: black;
width: 30%;
border-top: 3px solid red;
background-color: white;
height: 80px;
}
.firstsection {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.pop {
float: right;
height: 100px;
width: 100%;
text-align: center;
}
<section style="background-color: #293352" class="pop">
<h1 class="bottomheader">Popular News</h1>
<h4 class="READMORE">READ MORE</h4>
</section>
<section style="background-color: #293352" class="firstsection">
<h3 class="h1">content</h3>
<h3 class="h2">content</h3>
<h3 class="h3">content</h3>
<h3 class="h4">content</h3>
<h3 class="h5">content</h3>
<h3 class="h6">content</h3>
</section>
All you really need to do is add align-content: flex-start. This aligns wrapped lines to the start of the flex container and has similar options as align-items. See align-content
I created a fiddle
.firstsection {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-content: flex-start;
}
In this example I changed the 'cards' to divs and used a card class, and added a little padding. This may or may not be what you want but maybe it helps.
You can use the CSS GRID to align them properly.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.firstsection {
display: block;
width: 100%;
background-color: #293352;
padding: 50px 20px;
}
h3 {
color: black;
width: 100%;
border-top: 3px solid red;
background-color: white;
height: 130px;
margin: 0;
}
.firstsection {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
<section class="firstsection">
<h3>content</h3>
<h3>content</h3>
<h3>content</h3>
<h3>content</h3>
<h3>content</h3>
<h3>content</h3>
</section>
Codepen: https://codepen.io/manaskhandelwal1/pen/XWjobLx
here is another approach with grid , using pseudo elements to shrink the visible rows to the center, and sizing a few elements via width and max-width:
example below to run in fullpage mode then resize the window to see if the behavior is what you expect.
body {
margin: 0;
background-color: #293352;
}
.grid {
display: grid;
grid-template-rows: auto 1fr;
min-height: 100vh;
}
.pop {
color: white;
text-align: center;
position: relative;
padding: 1em 10em;
}
.pop h4 {
position: absolute;
right: 1rem;
top: 0.5rem;
border: solid 1px;
padding: 1em;
}
section.firstsection {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr repeat(auto-fill, max-content) 1fr;
align-items: center;
width: max-content;
max-width:100%;
margin: auto;
gap: 1em;
}
.firstsection:before,
.firstsection:after {
content: "";
grid-column: span 3;
}
.firstsection > * {
box-sizing: border-box;
min-width: 26%;
background: white;
height: 100%;
padding: 1em;
border-top: solid red;
max-width:30vw;
}
<div class="grid">
<section class="pop">
<h1 class="bottomheader">Popular News</h1>
<h4 class="READMORE">READ MORE</h4>
</section>
<section class="firstsection">
<h3 class="h1">content</h3>
<h3 class="h2">content</h3>
<h3 class="h3">content</h3>
<h3 class="h4">content <br> and an extra line</h3>
<h3 class="h5">content</h3>
<h3 class="h6">content or grow the column to my width if there's enough room.</h3>
</section>
</div>
here is a codepen with a grid of 9 boxes to play with : https://codepen.io/gc-nomade/pen/dypwYvY