Issue
I took the desktop first approach to add responsiveness to my webpage. However, as the viewport resolution reduces before reaching the break point 720px, the "tab section" in picture 1(grid name: "tabs") below shrinks accordingly. Is there any way to keep its size even if it becomes greater than the grid track size as shown in the second picture(the grid item is greater than the track in size but doesn't break into two lines)? By the way, I am also trying to figure out how to keep the text in meta section from breaking onto the next line until it reaches the break point(please take a look at the second picture). Any tip on how to achieve is welcome.
.flex {
display:flex;
gap: var(--gap,1rem);
}
.container-tabs * {
background-color: transparent;
border:none;
cursor:pointer;
font-size: 2rem;
}
.content-meta {
--gap:2rem;
}
.content-meta p {
font-size: 2.5rem;
}
@media (min-width: 720px) {
.grid-container {
display:grid;
column-gap: 2rem;
grid-template-columns: minmax(2rem, 1fr) repeat(2,minmax(0,30rem)) minmax(2rem, 1fr);
grid-template-areas:
'. title title .'
'. image tabs .'
'. image content .';
}
.grid-container > .container-title {
grid-area: title;
}
.grid-container > .container-image {
grid-area: image;
}
.grid-container > .container-tabs {
grid-area: tabs;
}
.grid-container > .container-content {
grid-area: content;
}
.container-image {
display:block;
max-width:100%;
}
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="testing.css">
<title></title>
</head>
<body>
<main class="grid-container">
<h2 class="container-title">Pick one planet</h2>
<img class="container-image"src="https://i.ibb.co/F80STD5/image-mars.webp" alt="LOGO">
<div class="container-tabs">
<button type="button">Moon</button>
<button type="button">Mars</button>
<button type="button">Titan</button>
<button type="button">Europa</button>
</div>
<article class="container-content">
<h1>MARS</h1>
<p>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>
<div class="content-meta flex">
<div class="">
<h2>Avg. distance</h2>
<p>225 mil. km</p>
</div>
<div class="">
<h2>Est. travel time</h2>
<p>9 months</p>
</div>
</div>
</article>
</main>
</body>
</html>Solution
The easiest way to achieve what you want is to add the property "white-space: nowrap;" to each text element you want to keep from breaking line. Of course you should only give it to them at the breakpoint you need them to stay on one line.
Answered By - Marghen
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.