I have the following situation using flex: Codepen
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.first-card {
border: 1px black solid;
width: 480px;
padding: 24px;
display: flex;
flex-direction: column;
}
.content {
flex-wrap: wrap;
grid-gap: 32px;
display:flex;
}
.left-content {
border: 1px green solid;
flex-grow: 1;
flex-basis: 200px;
}
.right-content {
flex-grow: 1;
border: 1px deeppink solid;
flex-basis: 200px;
}
</style>
</head>
<body>
<div class="first-card">
<h1>Title</h1>
<div class="content">
<div class="left-content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam ab assumenda ex sint esse atque consectetur in velit voluptate quibusdam beatae quam vero a natus, id recusandae laudantium sed, incidunt rem? Dolores eveniet beatae asperiores repellendus veniam hic accusantium qui, totam non fuga earum nobis architecto. Et rem alias tempore.
</div>
<div class="right-content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, consequuntur omnis doloremque nostrum aliquam minima facere, modi possimus quo atque velit eum pariatur assumenda, quisquam laborum officiis at! Ut libero accusamus delectus dignissimos vitae reiciendis quasi tempora labore culpa doloremque ullam, vero, enim repellat qui nihil quaerat? Reiciendis, aspernatur quo?
</div>
</div>
<div class="buttons">
<button> My button</button>
</div>
</div>
</body>
</html>
I want that when the div is smaller than 490px (it wraps) that a margin exists between "My button" and the last item in "content", which would be "right content" from the example.
Is there a way to do so?
Use this with content margin-bottom:clamp(0px,(450px - 100%)*9999,20px). It's a conditional margin based on the value 450px. If the container is bigger than 450px you have 0px else you have 20px
* {
box-sizing: border-box;
}
.first-card {
border: 1px black solid;
width: 480px;
padding: 24px;
display: flex;
flex-direction: column;
overflow:auto;
resize:horizontal;
}
.content {
flex-wrap: wrap;
grid-gap: 32px;
display: flex;
margin-bottom:clamp(0px,(450px - 100%)*9999,20px)
}
.left-content {
border: 1px green solid;
flex-grow: 1;
flex-basis: 200px;
}
.right-content {
flex-grow: 1;
border: 1px deeppink solid;
flex-basis: 200px;
}
<html>
<body>
<div class="first-card">
<h1>Title</h1>
<div class="content">
<div class="left-content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam ab assumenda ex sint esse atque consectetur in velit voluptate quibusdam beatae quam vero a natus, id recusandae laudantium sed, incidunt rem? Dolores eveniet beatae asperiores repellendus
veniam hic accusantium qui, totam non fuga earum nobis architecto. Et rem alias tempore.
</div>
<div class="right-content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, consequuntur omnis doloremque nostrum aliquam minima facere, modi possimus quo atque velit eum pariatur assumenda, quisquam laborum officiis at! Ut libero accusamus delectus dignissimos vitae
reiciendis quasi tempora labore culpa doloremque ullam, vero, enim repellat qui nihil quaerat? Reiciendis, aspernatur quo?
</div>
</div>
<div class="buttons">
<button> My button</button>
</div>
</div>
</body>
</html>
Unfortunately with just CSS, no. If your div width relies on something like screen width, you could use media queries.
With javascript, You could poll the element for its width and conditionally add or remove the styling needed for the buttons margin-top.
Related
How can I make the green background to cover all the .section class?
I have this structure:
section // one section will have one container
->container // one container can have multiple elements
->elements // the background class set here should override the section
relation everywhere and I would like to define a "background" element that covers the whole section.
Note:
I am getting the data like(section/container/elements) this and it is not going to change.
There is possible to have multiple sections each with it's own background.
.section {
width: 100%;
background-color: yellow;
}
.container {
height: 300px;
padding: 30px;
margin: 100px;
background-color: red;
}
.background {
width: 100%;
height: 100%;
}
.red {
background: red;
}
.green {
background: green;
}
<div class="section">
<div class="container">
<div class="background green" />
<div>
some content
</div>
</div>
</div>
Link to jsfiddle
you Should style give tag section
background-color: green;
You could set the position of .section to relative, and set the position of .green to absolute.
Now the position, width & height will use .section as reference.
Then you could set these properties freely.
here is the code:
.section{
position: relative;
}
.green {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
and then you may have to adjust their z-index
.green {
z-index: -1;
}
.section {
z-index: 0;
}
absolute: The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left. MDN
One approach, with explanatory comments in the code, is as below:
/* simple reset to ensure no browser-default padding/margin exists,
and forces all element-size calculations to include border-width
and padding inside the defined width: */
*,::before, ::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.section {
/* all values here are purely aesthetic, adjust to your own
requirements: */
border: 2px solid #000;
height: 80vmin;
width: 80vmin;
margin-block: 1em;
margin-inline: auto;
}
.container {
/* here we use grid layout on the .container element(s): */
display: grid;
/* we specify one grid-column and one grid-row, each of which
take 100% of the available space: */
grid-template-columns: 1fr;
grid-template-rows: 1fr;
/* sizing the grid to be 100% of the parent's width/height: */
width: 100%;
height: 100%;
}
/* all <div> elements that are children of the .container: */
.container > div {
/* are placed in the first grid-column and first grid-row: */
grid-column: 1;
grid-row: 1;
/* specifying a max-height and max-width of 100% to address
potential overflow; obviusly adjust to your requirements: */
max-height: 100%;
max-width: 100%;
}
/* styling the element that will hold the contents (so far as your
demo shows): */
.container > div:last-child {
/* hiding overflow on x-axis: */
overflow-x: hidden;
/* allowing scrolling on the y-axis to see
overflowing content: */
overflow-y: scroll;
/* defining some white-space between the element edges and contents
within: */
padding: 0.5em;
}
.blue {
background-color: hsl(180 65% 81% / 0.5);
}
.green {
background-color: hsl(120 93% 79% / 0.5);
}
.yellow {
background-color: hsl(60 100% 50% / 0.5);
}
<div class="section">
<div class="container">
<div class="background blue" />
<div>
Some very short content
</div>
</div>
</div>
<div class="section">
<div class="container">
<div class="background green" />
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat corporis hic sunt nam perferendis assumenda asperiores nobis quae consequatur aut ut quidem id, optio consequuntur ipsa labore consectetur nihil incidunt.</p>
<p>Minima quibusdam hic culpa, ea porro vitae asperiores! Vitae odit, delectus nesciunt asperiores maxime. Voluptatum velit repellendus in. Impedit laudantium asperiores nostrum neque laboriosam eius libero fugiat itaque inventore nulla?</p>
<p>Laboriosam quod, facilis ratione quas consequatur quis quisquam vel eius velit eveniet, excepturi voluptatem ea dicta quam eaque praesentium sequi illum, optio animi! Libero minima iste, maiores temporibus reiciendis repellendus.</p>
<p>Blanditiis reiciendis eveniet perspiciatis excepturi, nulla eum, rem atque. Perspiciatis quae sed autem officiis error, earum officia, nulla quod, velit deleniti pariatur. Obcaecati inventore, in adipisci eveniet, expedita a quaerat.</p>
<p>Quaerat labore vitae iure expedita eaque nostrum distinctio et, atque velit quisquam corporis animi, aut voluptatem itaque odio ipsum. Iusto asperiores eius at quos totam voluptatum, ratione voluptate cum quas.</p>
<p>Sed minima aliquid voluptatum minus dolores, iusto, ducimus doloribus! Aliquam quae, atque! Iusto nobis alias magnam minima, impedit iste illo iure illum doloremque debitis! Ipsa assumenda soluta fugiat ut esse.</p>
<p>Sint voluptatum suscipit laborum, aliquid eveniet odit blanditiis corporis voluptatibus, rem consectetur quam quidem saepe, doloremque, sit nihil rerum voluptas deleniti a expedita quo quod beatae modi. Incidunt, aliquid. Ea.</p>
<p>Minus, dicta sed maiores amet necessitatibus eaque magnam asperiores, aperiam, qui earum numquam sequi eius provident officiis. Illum fuga earum architecto nesciunt ut beatae mollitia quod sunt nulla. Ipsum, modi?</p>
<p>Eligendi, officiis maxime cupiditate consectetur voluptates est ullam odio, porro sint cum suscipit rerum nisi quibusdam non enim repudiandae facere fugiat repellendus possimus, sequi excepturi culpa iusto. Velit, sunt deleniti!</p>
<p>Ipsa deserunt dolorum molestias reiciendis. Ad dolorum eius suscipit, sapiente laboriosam dolor sequi, accusamus id consequuntur modi aliquid, architecto fuga illum non voluptatum quod. Molestiae deserunt maxime suscipit tenetur, tempora.</p>
<p>Id non fugit in vitae. Fuga voluptates sapiente, impedit atque, quasi, consequatur autem sunt dignissimos unde nam quam! Officiis quos, distinctio facilis illum explicabo incidunt quia pariatur minima, enim at.</p>
<p>Commodi consectetur repellendus ad assumenda eius voluptatibus tempora dolor et possimus quaerat aperiam nesciunt qui optio, sapiente ab libero iste, recusandae, suscipit obcaecati accusamus perferendis minus molestias. Nisi, inventore, explicabo?</p>
</div>
</div>
</div>
<div class="section">
<div class="container">
<div class="background yellow" />
<div>
Some very short content
</div>
</div>
</div>
JS Fiddle demo.
References:
box-sizing.
CSS Pseudo-elements.
display.
grid-column.
grid-row.
grid-template-columns.
grid-template-rows.
hsl().
:last-child.
margin.
margin-inline.
margin-block.
max-height.
max-width.
overflow.
overflow-x.
overflow-y.
padding.
vmin.
width.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
margin: 0 auto;
}
.header {
padding: 2.5rem 0;
margin-bottom: 1rem;
background-color: #c8bfbf;
}
.content {
display: flex;
flex-direction: row;
}
.navbar-list {
display: flex;
flex-direction: row;
list-style: none;
}
.list-item {
margin-left: 1rem;
}
.footer-list {
display: flex;
flex-direction: row;
list-style: none;
}
.footer-content {
display: flex;
flex-direction: row;
list-style: none;
justify-content: space-between;
}
.main-container {
width: 1200px;
}
<!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="stylesheet" href="./style.css">
<title>CSS Assignment</title>
</head>
<body>
<nav>
<ul class="navbar-list">
<li class="list-item">Home</li>
<li class="list-item">About</li>
<li class="list-item">Service</li>
<li class="list-item">Contact</li>
</ul>
</nav>
<div class='header'>
<h2>We Provide the best IT Services</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum, assumenda distinctio. Fugit, quam veritatis
officia mollitia ex fugiat beatae temporibus.</p>
Know more...
</div>
<div class="content">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Amet ex itaque voluptates facilis earum quis
similique, quasi quisquam nesciunt nulla ab esse veritatis molestias. Sapiente dolore molestiae error, quos
pariatur minima omnis, ipsa quis et a porro dignissimos totam officiis ad quo eos quae natus dicta ullam
cupiditate tempore? Omnis labore exercitationem eaque asperiores illum praesentium nobis, a velit molestias?
</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Amet ex itaque voluptates facilis earum quis
similique, quasi quisquam nesciunt nulla ab esse veritatis molestias. Sapiente dolore molestiae error, quos
pariatur minima omnis, ipsa quis et a porro dignissimos totam officiis ad quo eos quae natus dicta ullam
cupiditate tempore? Omnis labore exercitationem eaque asperiores illum praesentium nobis, a velit molestias?
</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Amet ex itaque voluptates facilis earum quis
similique, quasi quisquam nesciunt nulla ab esse veritatis molestias. Sapiente dolore molestiae error, quos
pariatur minima omnis, ipsa quis et a porro dignissimos totam officiis ad quo eos quae natus dicta ullam
cupiditate tempore? Omnis labore exercitationem eaque asperiores illum praesentium nobis, a velit molestias?
</p>
</div>
<footer class="footer-content">
<div class="footer-list">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</div>
<div class="footer-list">
<li>Facebook</li>
<li>Twitter</li>
<li>Viemo</li>
</div>
</footer>
</body>
</html>
Can someone help me with this layout?
https://imgur.com/a/Dq5WNOz
I am using CSS flexbox to style it but I have a question. How is the header text and the content's width lined up / same width. But also their background extends the full page. Is the content lined up with the same padding? At first I tried using the same margin but my example ended up looking like this.
Mine : https://imgur.com/5PxvMKs
I just made certain changes and did CSS and here is the layout you were looking for.
-user container to wrap
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
max-width: 1024px;
margin: auto;
}
nav {
background: #000;
}
.navbar-list {
padding: 0;
margin: 0;
display: flex;
list-style: none;
}
.navbar-list>.list-item {
margin-right: 15px;
}
.navbar-list>.list-item a {
color: #fff;
text-decoration: none;
line-height: 50px;
}
.header {
background: #aaaaaa;
padding: 30px 0;
}
.header h2 {
padding: 0 0 15px;
}
.content p {
display: inline-block;
width: calc(100% / 3 - 30px);
text-align: justify;
margin: 0 15px;
}
.content {
padding: 30px 0;
}
.content p:first-child {
margin-left: 0;
}
.content p:last-child {
margin-right: 0;
}
footer.footer-content {
background: green;
padding: 15px 0;
}
.footer-lists {
display: flex;
justify-content: space-between;
}
.footer-list {
list-style: none;
display: flex;
}
.footer-list>li a {
color: #fff;
text-decoration: none;
margin-right: 15px;
}
.footer-list>li:last-child a {
margin-right: 0;
}
<!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="stylesheet" href="./style.css">
<title>CSS Assignment</title>
</head>
<body>
<nav>
<div class="container">
<ul class="navbar-list">
<li class="list-item">Home</li>
<li class="list-item">About</li>
<li class="list-item">Service</li>
<li class="list-item">Contact</li>
</ul>
</div>
</nav>
<div class='header'>
<div class="container">
<h2>We Provide the best IT Services</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum, assumenda distinctio. Fugit, quam veritatis officia mollitia ex fugiat beatae temporibus.</p>
Know more...
</div>
</div>
<div class="content">
<div class="container">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Amet ex itaque voluptates facilis earum quis similique, quasi quisquam nesciunt nulla ab esse veritatis molestias. Sapiente dolore molestiae error, quos pariatur minima omnis, ipsa quis et
a porro dignissimos totam officiis ad quo eos quae natus dicta ullam cupiditate tempore? Omnis labore exercitationem eaque asperiores illum praesentium nobis, a velit molestias?
</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Amet ex itaque voluptates facilis earum quis similique, quasi quisquam nesciunt nulla ab esse veritatis molestias. Sapiente dolore molestiae error, quos pariatur minima omnis, ipsa quis et
a porro dignissimos totam officiis ad quo eos quae natus dicta ullam cupiditate tempore? Omnis labore exercitationem eaque asperiores illum praesentium nobis, a velit molestias?
</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Amet ex itaque voluptates facilis earum quis similique, quasi quisquam nesciunt nulla ab esse veritatis molestias. Sapiente dolore molestiae error, quos pariatur minima omnis, ipsa quis et
a porro dignissimos totam officiis ad quo eos quae natus dicta ullam cupiditate tempore? Omnis labore exercitationem eaque asperiores illum praesentium nobis, a velit molestias?
</p>
</div>
</div>
<footer class="footer-content">
<div class="container">
<div class="footer-lists">
<div class="footer-list">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</div>
<div class="footer-list">
<li>Facebook</li>
<li>Twitter</li>
<li>Viemo</li>
</div>
</div>
</div>
</footer>
</body>
</html>
Total beginner here, learning HTML and CSS (not yet grid and flexbox). I am trying to make a section with two horizontal blocks consisting of an image/icon to the left and text on the right. Very simple, yet I somehow can't get the icon to float to the left of the text. It is stuck on the line below. What am I doing wrong? or what should I add?
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
margin: auto;
max-width: 1100px;
overflow: auto;
padding: 50px;
}
#strengths {
height: 600px;
margin: auto;
Display: block;
background-image: url('./img/mountain-lake.jpg');
background-size: cover;
}
#strengths .primary {
background-color: #ccc7f2;
padding: 20px;
margin: 20px;
border-radius: 10px;
opacity: 0.75;
line-height: 1.4em;
}
#strengths .primary i {
float: left;
margin-right: 20px;
display: inline;
}
<section id="strengths" class="py-3">
<div class="container">
<h2 class="main-heading">My Strengths</h2>
<div class="primary">
<h3 class="sub-heading">Strategic Thinking</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus perspiciatis culpa optio nam, ut maxime voluptatibus magnam amet id cupiditate reiciendis quis mollitia vitae nobis eum corporis! Dicta dolorum delectus repellat dolorem hic quis
qui illum minima ullam voluptas, reiciendis sed quos asperiores eaque amet velit magnam maxime officiis facere.</p>
<i class="fas fa-chess-pawn fa-3x"></i>
</div>
<br><br>
<div class="primary">
<h3 class="sub-heading">Analysis</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus perspiciatis culpa optio nam, ut maxime voluptatibus magnam amet id cupiditate reiciendis quis mollitia vitae nobis eum corporis! Dicta dolorum delectus repellat dolorem hic quis
qui illum minima ullam voluptas, reiciendis sed quos asperiores eaque amet velit magnam maxime officiis facere.</p>
<i class="far fa-play-circle fa-3x"></i>
</div>
</div>
</section>
Bad idea to use float. I suggest you look into flexbox asap.
But if you really want to use it, you should change the HTML a little bit.
Think of it this way. You want the icon to be a 'column' and the title together with the text to be another column.
The best way to achieve that is to wrap the text and title inside a HTML element ( most probably a div )
Then you should specify the width used inside their parent .primary. So for example the icon has 5% and the title and text 95% - 20px which is the margin of the icon.
Also add float:left to the primary div. Because adding float:left to an element ( the icon and text ) gets that element out of the normal flow of the document. ( similar to position:fixed/absolute ) and so, for them to remain ' a part ' of the primary div , you need to add float:left on that div also.
See below
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
margin: auto;
max-width: 1100px;
overflow: auto;
padding: 50px;
}
#strengths {
height: 600px;
margin: auto;
Display: block;
background-image: url('./img/mountain-lake.jpg');
background-size: cover;
}
#strengths .primary {
background-color: #ccc7f2;
padding: 20px;
margin: 20px;
border-radius: 10px;
opacity: 0.75;
line-height: 1.4em;
float:left;
width:100%;
}
#strengths .primary i {
float: left;
margin-right: 20px;
display: inline;
width:5%;
}
#strengths .primary .wrapper {
float:right;
width: calc(95% - 20px);
}
<section id="strengths" class="py-3">
<div class="container">
<h2 class="main-heading">My Strengths</h2>
<div class="primary">
<div class="wrapper">
<h3 class="sub-heading">Strategic Thinking</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus perspiciatis culpa optio nam, ut maxime voluptatibus magnam amet id cupiditate reiciendis quis mollitia vitae nobis eum corporis! Dicta dolorum delectus repellat dolorem hic quis qui illum minima ullam voluptas, reiciendis sed quos asperiores eaque amet velit magnam maxime officiis facere.</p>
</div>
<i class="fas fa-chess-pawn fa-3x">icon</i>
</div>
<br><br>
<div class="primary">
<div class="wrapper">
<h3 class="sub-heading">Analysis</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus perspiciatis culpa optio nam, ut maxime voluptatibus magnam amet id cupiditate reiciendis quis mollitia vitae nobis eum corporis! Dicta dolorum delectus repellat dolorem hic quis qui illum minima ullam voluptas, reiciendis sed quos asperiores eaque amet velit magnam maxime officiis facere.</p>
</div>
<i class="far fa-play-circle fa-3x">icon</i>
</div>
</div>
</section>
i have a box for a text like this
my css is like this for the box,
.bg-text-kol2 {
background-color: #ffffff;
background-size: 10px 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
-webkit-box-shadow: 0px 10px 10px -8px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 10px 10px -8px rgba(0,0,0,0.75);
box-shadow: 0px 10px 10px -8px rgba(0,0,0,0.75);
}
because this slider use swipper slider this is the js,
$(document).ready(function() {
(function ($) {
//initialize swiper when document ready
var swiper = new Swiper('.swiper-container', {
slidesPerView: 2,
spaceBetween: 20,
centeredSlides: true,
})(jQuery);
});
the question is how to make the size is same? i want to make the box is 640px x 640px?
I think you can work on from this demo, I tried to replicated your images.
The most important here is you need to set the swiper height, this property helps the plugin to determine the size of the swiper.
Codepen demo: https://codepen.io/DieByMacro/pen/mYxJNo
var mySwiper = new Swiper ('.swiper-container', {
// Optional parameters
direction: 'horizontal',
slidesPerView: 2,
loop: true,
spaceBetween: 20,
// If we need pagination
pagination: {
el: '.swiper-pagination',
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// And if we need scrollbar
scrollbar: {
el: '.swiper-scrollbar',
},
})
.swiper-container {
width: 100%;
height: 600px;
}
/**
Using flex to make sure the content expand full. This makes all items height equal
*/
.swiper-item {
display: flex;
flex-flow: column nowrap;
}
.swiper-item .item-image {
flex: 0 0 auto;
background: blue;
height: 250px;
}
.swiper-item .item-content {
flex: 1 1 0px;
height: auto;
background: white;
padding: 20px;
width: 85%;
margin: -30px auto 0;
}
.wrapper {
background: lightgreen;
padding: 10px;
width: 100%;
max-width: 1024px;
margin-left: auto;
margin-right: auto;
position: relative;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
<div class="wrapper">
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide swiper-item">
<div class="item-image">
Image
</div>
<div class="item-content">
<div class="item-content__text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem, neque!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia unde placeat fuga reprehenderit temporibus non velit molestiae quam ipsam assumenda, quo dignissimos neque, eligendi ad in, debitis voluptatem. Eos harum praesentium facere? Quo fuga ipsum ut tenetur consequuntur veniam minus, doloremque tempora sunt ipsam dolorum reprehenderit magni excepturi ipsa quaerat voluptatum ea repudiandae assumenda placeat, earum eum cumque quis voluptates corporis! Id quis suscipit molestias, dolor laboriosam laudantium corrupti, ipsa cumque culpa tempore enim veniam saepe accusantium, natus dolores! Blanditiis quo fugiat minus iusto modi, iure earum voluptas, consequuntur qui distinctio maiores esse quae error odio cupiditate nisi veniam ad.</p>
</div>
</div>
</div>
<div class="swiper-slide swiper-item">
<div class="item-image">
Image
</div>
<div class="item-content">
<div class="item-content__text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem, neque!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor sequi placeat reiciendis tenetur, illum est, ipsa esse iusto neque fugiat magnam earum nostrum deserunt, odit animi vel quas assumenda fugit obcaecati nulla! Reprehenderit eum, impedit quibusdam laborum harum unde tempore. A facilis itaque, in maiores nam reiciendis provident ducimus nesciunt, consequuntur dolorum numquam optio quis facere quisquam nemo distinctio saepe?</p>
</div>
</div>
</div>
<div class="swiper-slide swiper-item">
<div class="item-image">
Image
</div>
<div class="item-content">
<div class="item-content__text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem, neque!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, tempore!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex possimus quaerat omnis officiis. Quaerat dignissimos libero porro nesciunt quidem beatae assumenda. Doloremque temporibus quia soluta cum officiis odio, maxime veritatis.</p>
</div>
</div>
</div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
</div>
Let's say I have a container, and I want it to be 1200px wide on large screens, and on screens that are <= 1200px, I want it to take all of the window's width.
The question is - which CSS syntax is a better practice, and why?
1)
.container {
width: 1200px;
max-width: 100%;
}
<div class="container" style="border: 5px solid magenta; background-color: black; color: white; padding: 1em;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, ea, nemo. Sequi saepe aut eius voluptatum doloribus! Aliquam corporis vitae eveniet, sapiente eos similique voluptatum molestiae, nostrum animi facere, voluptatibus nemo maxime voluptas ipsum atque! Molestias obcaecati totam pariatur vel.
</div>
2)
.container {
width: 100%;
max-width: 1200px;
}
<div class="container" style="border: 5px solid cyan; background-color: black; color: white; padding: 1em;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, ea, nemo. Sequi saepe aut eius voluptatum doloribus! Aliquam corporis vitae eveniet, sapiente eos similique voluptatum molestiae, nostrum animi facere, voluptatibus nemo maxime voluptas ipsum atque! Molestias obcaecati totam pariatur vel.
</div>
I checked on various browsers and devices, both of the CSS options worked good.