I have an <ol> that I'm trying to style for one page and have it no affect other lists that are on other pages or pages in the near future. The way it is set up now is how it should look but when I add a class to it to try and make it, it's own list not affecting other list.
I know that setting the <ol> tag by its self is considered a global attribute and will belong to all other tags a like but when I add a class to it, everything shifts upwards so that the numbers and text are no longer aligned.
So an example of what I have tried is adding a class class="test to the ol tag and then add that to the CSS style sheet like the commented code.
So just putting this out there that I changed the default way the <ol> list is displayed from "1." to "1)". I would like to keep that format for this one list and for any other list that are created later on have the default numbering/display.
Any help would be great.
.container {
width: 50%;
margin: auto;
border-top: 2px solid #cccccc;
font-size: 12px;
}
.list-container {
padding-left: 15%;
padding-right: 15%;
padding-top: 15px;
}
/** example
.test ol {
counter-reset: list;
}
**/
ol {
counter-reset: list;
}
ol>li {
list-style: none;
margin-bottom: -10px;
}
ol>li:before {
content: counter(list) ") ";
counter-increment: list;
}
li>.list-paragraph {
display: inline-block;
margin-left: 30px;
position: relative;
bottom: 15px;
}
<div class="container">
<div class="Header">
<h2>Terms and Conditions</h2>
<div class="legal-stuff">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh nisl condimentum id venenatis. Ultrices gravida dictum fusce ut placerat orci. Vitae ultricies leo integer malesuada nunc
vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh nisl condimentum id venenatis. Ultrices gravida dictum fusce ut placerat orci. Vitae ultricies leo integer malesuada
nunc vel.
</div>
</div>
<div class="list-container">
<ol>
<li>
<div class="list-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh nisl condimentum id venenatis. Ultrices gravida dictum fusce ut placerat orci. Vitae ultricies leo integer malesuada
nunc vel.</div>
</li>
<li>
<div class="list-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh nisl condimentum id venenatis. Ultrices gravida dictum fusce ut placerat orci. Vitae ultricies leo integer malesuada
nunc vel.</div>
</li>
<li>
<div class="list-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh nisl condimentum id venenatis. Ultrices gravida dictum fusce ut placerat orci. Vitae ultricies leo integer malesuada
nunc vel.</div>
</li>
<li>
<div class="list-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh nisl condimentum id venenatis. Ultrices gravida dictum fusce ut placerat orci. Vitae ultricies leo integer malesuada
nunc vel.</div>
</li>
<li>
<div class="list-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh nisl condimentum id venenatis. Ultrices gravida dictum fusce ut placerat orci. Vitae ultricies leo integer malesuada
nunc vel.</div>
</li>
</ol>
</div>
</div>
As per the previous comment, I have now created a demo here where I have added the .list class to the ol and all seems fine based on your code example. I assume the issue lies elsewhere - possibly the name of the class you selected may be clashing.
See the snippet included:
.container {
width: 50%;
margin: auto;
border-top: 2px solid #cccccc;
font-size: 12px;
}
.list-container {
padding-left:15%;
padding-right: 15%;
padding-top: 15px;
}
.list {
color: red;
counter-reset: list;
}
ol {
counter-reset: list;
}
ol > li {
list-style: none;
margin-bottom: -10px;
}
ol > li:before {
content: counter(list) ") ";
counter-increment: list;
}
li > .list-paragraph {
display: inline-block;
margin-left: 30px;
position: relative;
bottom: 15px;
}
<div class="container">
<div class="Header">
<h2>Terms and Conditions</h2>
<div class="legal-stuff">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh nisl condimentum id venenatis. Ultrices gravida dictum fusce ut placerat orci. Vitae ultricies leo integer malesuada nunc vel.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh nisl condimentum id venenatis. Ultrices gravida dictum fusce ut placerat orci. Vitae ultricies leo integer malesuada nunc vel.
</div>
</div>
<div class="list-container">
<ol class="list">
<li>
<div class="list-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh nisl condimentum id venenatis. Ultrices gravida dictum fusce ut placerat orci. Vitae ultricies leo integer malesuada nunc vel.</div>
</li>
<li>
<div class="list-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh nisl condimentum id venenatis. Ultrices gravida dictum fusce ut placerat orci. Vitae ultricies leo integer malesuada nunc vel.</div>
</li>
<li>
<div class="list-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh nisl condimentum id venenatis. Ultrices gravida dictum fusce ut placerat orci. Vitae ultricies leo integer malesuada nunc vel.</div>
</li>
<li>
<div class="list-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh nisl condimentum id venenatis. Ultrices gravida dictum fusce ut placerat orci. Vitae ultricies leo integer malesuada nunc vel.</div>
</li>
<li>
<div class="list-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh nisl condimentum id venenatis. Ultrices gravida dictum fusce ut placerat orci. Vitae ultricies leo integer malesuada nunc vel.</div>
</li>
</ol>
</div>
</div>
I just added a class .mainList and everything is working fine. I also created another list with class '.innerList'.
Here is the code.
Now, when you copy the same list to other pages just replace this class name with some other class name, copy the css and replace the class name and do the changes in the styling. As long the class names are different nothing wrong will happen.
I hope this will be helpful.
Related
I have figured out how to set two HTML elements side by side. I want to have a text paragraph on the left and an image on the right.
Currently, my code is:
<!DOCTYPE html>
<html>
<style>
</style>
<body>
<div style="width: 50%; height: 100px; float: left;" >
<h2> What We Do</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi tincidunt ornare massa eget egestas. Vel eros donec ac odio tempor. Est velit egestas dui id ornare arcu odio ut sem. Urna porttitor rhoncus dolor purus non enim praesent elementum facilisis.</p>
</div>
<div style="margin-left:50%; "><img style=" max-width: 100%; height: auto;" src="https://images.designtrends.com/wp-content/uploads/2016/04/06094112/Beautiful-Mountain-HD-Backgrounds.jpg" >
</div>
</div>
</body>
</html>
This is results in an two column layout, but I want to know how to format.
I want to add padding to the text, but when I do so, the image is messed up completely. How can I padding padding to my text so that there is space around it? I tried to add padding:20px; to the <div> that has the text which doesn't work.
<div style="width: 50%; height: 100px; float: left; padding:20px;">
<h2> What We Do</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi tincidunt ornare massa eget egestas. Vel eros donec ac odio tempor. Est velit egestas dui id ornare arcu odio ut sem. Urna porttitor rhoncus dolor purus non enim praesent elementum facilisis.</p>
</div>
Use Grid with a media query for smaller screens:
article {
display: grid;
}
div {
padding: 0.5em;
}
img {
width: 100%;
}
#media (min-width: 400px) {
article {
grid-template-columns: 50% 50%;
}
}
<article>
<div>
<h2> What We Do</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi tincidunt ornare massa eget egestas. Vel eros donec ac odio tempor. Est velit egestas dui id ornare arcu odio ut sem.
Urna porttitor rhoncus dolor purus non enim praesent elementum facilisis.</p>
</div>
<img src="https://images.designtrends.com/wp-content/uploads/2016/04/06094112/Beautiful-Mountain-HD-Backgrounds.jpg">
</article>
use box-sizing:border-box, after applying padding, so the padding will be calculated within the width
For more info Reference
<div style="width: 50%; height: 100px; float: left; padding:20px;box-sizing:border-box" >
<h2> What We Do</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi tincidunt ornare massa eget egestas. Vel eros donec ac odio tempor. Est velit egestas dui id ornare arcu odio ut sem. Urna porttitor rhoncus dolor purus non enim praesent elementum facilisis.</p>
</div>
<div style="margin-left:50%; "><img style=" max-width: 100%; height: auto;" src="https://images.designtrends.com/wp-content/uploads/2016/04/06094112/Beautiful-Mountain-HD-Backgrounds.jpg" >
</div>
</div>
The best way to do this is to wrap both <div> inside a flex-box. And adding border-box as value for box-sizing property. You can read more about box-sizing here: Box Sizing and about Flex Box here. Both are pretty useful to placing items side by side.
Here is a sample code.
<!DOCTYPE html>
<html>
<style>
* {
box-sizing: border-box;
}
</style>
<body>
<div style="display: flex; flex-direction: row; width: 100%;">
<div style="width: 50%; height: 100px; padding:20px;">
<h2> What We Do</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore
magna aliqua. Morbi tincidunt ornare massa eget egestas. Vel eros donec ac odio tempor. Est velit
egestas
dui id ornare arcu odio ut sem. Urna porttitor rhoncus dolor purus non enim praesent elementum
facilisis.
</p>
</div>
<div style="width: 50%; padding: 20px;">
<img style=" max-width: 100%; height: auto;"
src="https://images.designtrends.com/wp-content/uploads/2016/04/06094112/Beautiful-Mountain-HD-Backgrounds.jpg" />
</div>
</div>
</body>
</html>
The box-sizing will prevent your image from changing position when adding padding to the div. And flex-box is much better way to position things instead of float as it offers more functionality and can also position things vertically.
Here is another great article related to Flex Box - Must Read.
You can use this example for side by side
.flex-container {
display: flex;
}
.flex-child {
flex: 1;
border: 2px solid yellow;
}
.flex-child:first-child {
margin-right: 20px;
}
<div class="flex-container">
<div class="flex-child magenta">
Flex Column 1
</div>
<div class="flex-child green">
Flex Column 2
</div>
</div>
Using flex makes it really simple to control the layout.
.container {
display: flex;
height: max-content;
gap: 1rem;
}
.flex-item {
flex: 1;
width: 50%;
}
.info {
height: 100px;
padding: 20px;
}
.image {
display: inline-block;
height: 150px;
width: 250px;
padding: 20px;
}
<div class="container">
<div class="flex-item info">
<h2> What We Do</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi tincidunt ornare massa eget egestas. Vel eros donec ac odio tempor. Est velit egestas dui id ornare arcu odio ut sem.
Urna porttitor rhoncus dolor purus non enim praesent elementum facilisis.</p>
</div>
<div class="flex-item">
<div><img class="image" src="https://images.designtrends.com/wp-content/uploads/2016/04/06094112/Beautiful-Mountain-HD-Backgrounds.jpg">
</div>
</div>
</div>
I'm quite very new to HMTL and CSS, having just coded in C# before.
I got this fiddle here
https://jsfiddle.net/4asrj9x6/24/
<html>
<header>
<body>
<nav>
<ul class="navigation">
<li>Home</li>
<li>Contact</li>
<li>About</li>
</ul>
</nav>
</header>
<main class="grid">
<aside></aside>
<section>
<h1>Header</h1>
<img src="https://via.placeholder.com/620x350.jpg">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Est ultricies integer quis auctor elit sed vulputate mi. Aenean pharetra magna ac
placerat vestibulum. Velit euismod in pellentesque massa. Bibendum neque egestas congue quisque egestas
diam in arcu. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Sit amet mauris
commodo quis imperdiet massa. Feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper.
</p>
</section>
<section>
<h1>Header</h1>
<img src="http://placehold.it/620x350.jpg">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Est ultricies integer quis auctor elit sed vulputate mi. Aenean pharetra magna ac
placerat vestibulum. Velit euismod in pellentesque massa. Bibendum neque egestas congue quisque egestas
diam in arcu. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Sit amet mauris
commodo quis imperdiet massa. Feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper.
</p>
</section>
<section>
<h1>Header</h1>
<img src="http://placehold.it/620x350.jpg">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Est ultricies integer quis auctor elit sed vulputate mi. Aenean pharetra magna ac
placerat vestibulum. Velit euismod in pellentesque massa. Bibendum neque egestas congue quisque egestas
diam in arcu. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Sit amet mauris
commodo quis imperdiet massa. Feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper.
</p>
</section>
<aside></aside>
</main>
</body>
</html>
* {
box-sizing: border-box;
}
header {
margin-top: none;
width: 100%;
height: 80px;
filter: drop-shadow(0px 8px 8px hsla(0, 0%, 0%, 0.24));
background-color: whitesmoke;
}
header nav {
display: flex;
justify-content: flex-end;
height: 100%;
}
.navigation {
list-style-type: none;
display: inline;
}
li a{
display: block;
text-align: center;
text-decoration: none;
}
.navigation li {
display: inline-flex;
height: 100%;
padding: 10px;
font-size: 24px;
}
main {
display: grid;
grid-template-columns: 20% 20% 20% 20% auto;
grid-gap: 20px;
}
aside {
margin: none;
}
section h1 {
text-align: center;
font-size: 24;
font-weight: bold;
}
section img {
width: 100%;
}
section img:hover {
opacity: 50%;
transition: 0.1s;
}
section p {
font-size: 18px;
}
What I want to accomplish is to move in my nav bar links from the right edge. So that the end of 'About' is sort of aligned with the end of the third image.
What I've tried is to add a lot of padding to the navigation class. However this feels super gimmicky and it doesn't scale well at all. Since as soon as you move the window even a tiny bit it goes all wrong.
There should be a better way to do this but I feel kind of stuck.
You have to give your nav-bar a width to work with, since you have justify-content set to flex-end it will always be on the end depending on the width you have set.
Give your nav-bar a reasonable width and line in up with the third image.
Final code:
header nav {
display: flex;
justify-content: flex-end;
height: 100%;
width: --your-desirable-width;
margin-right: auto;
}
This is responsable and it'll always be ..% of the screen.
so this should be what you are looking for, I have used css position: sticky; and have added only 2 lines of code in the styling of the header
<html>
<body>
<style>
* {
box-sizing: border-box;
}
header {
margin-top: none;
width: 100%;
height: 80px;
filter: drop-shadow(0px 8px 8px hsla(0, 0%, 0%, 0.24));
background-color: whitesmoke;
position: sticky;
top: 0;
}
header nav {
display: flex;
justify-content: flex-end;
height: 100%;
}
.navigation {
list-style-type: none;
display: inline;
}
li a{
display: block;
text-align: center;
text-decoration: none;
}
.navigation li {
display: inline-flex;
height: 100%;
padding: 10px;
font-size: 24px;
}
main {
display: grid;
grid-template-columns: 20% 20% 20% 20% auto;
grid-gap: 20px;
}
aside {
margin: none;
}
section h1 {
text-align: center;
font-size: 24;
font-weight: bold;
}
section img {
width: 100%;
}
section img:hover {
opacity: 50%;
transition: 0.1s;
}
section p {
font-size: 18px;
}
</style>
<header>
<nav>
<ul class="navigation">
<li>Home</li>
<li>Contact</li>
<li>About</li>
</ul>
</nav>
</header>
<main class="grid">
<aside></aside>
<section>
<h1>Header</h1>
<img src="https://via.placeholder.com/620x350.jpg">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Est ultricies integer quis auctor elit sed vulputate mi. Aenean pharetra magna ac
placerat vestibulum. Velit euismod in pellentesque massa. Bibendum neque egestas congue quisque egestas
diam in arcu. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Sit amet mauris
commodo quis imperdiet massa. Feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper.
</p>
</section>
<section>
<h1>Header</h1>
<img src="http://placehold.it/620x350.jpg">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Est ultricies integer quis auctor elit sed vulputate mi. Aenean pharetra magna ac
placerat vestibulum. Velit euismod in pellentesque massa. Bibendum neque egestas congue quisque egestas
diam in arcu. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Sit amet mauris
commodo quis imperdiet massa. Feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper.
</p>
</section>
<section>
<h1>Header</h1>
<img src="http://placehold.it/620x350.jpg">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Est ultricies integer quis auctor elit sed vulputate mi. Aenean pharetra magna ac
placerat vestibulum. Velit euismod in pellentesque massa. Bibendum neque egestas congue quisque egestas
diam in arcu. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Sit amet mauris
commodo quis imperdiet massa. Feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper.
</p>
</section>
<aside></aside>
</main>
</body>
</html>
This question already has answers here:
Percentage Height HTML 5/CSS
(7 answers)
Closed 2 years ago.
I'm trying to make a hero style home page for my website but i set the height to a percentage the image disappears. When I use rem or px the image pops up. I want it to be responsive. Is there any way to go about it that im missing?
.main-content {
background: url(/pictures/picture1.jpg);
background-repeat: no-repeat;
background-size: cover;
height: 100%;
width: 100%;
}
<div class="main-content">
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Adipiscing vitae proin sagittis nisl rhoncus. Mauris augue neque gravida in fermentum et sollicitudin ac orci. Volutpat lacus laoreet
non curabitur gravida arcu ac. Ipsum dolor sit amet consectetur adipiscing elit ut.
</p>
<button class="btn">Read More</button>
</div>
your div inherits it's height from parent.
.main-content {
background: url('https://via.placeholder.com/350');
background-repeat: no-repeat;
background-size: cover;
height:100%;
width: 100%;
}
html,body{
height:100%;}
<div class="main-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Adipiscing vitae proin sagittis nisl rhoncus. Mauris augue neque gravida in fermentum et sollicitudin ac orci. Volutpat lacus laoreet
non curabitur gravida arcu ac. Ipsum dolor sit amet consectetur adipiscing elit ut.
<button class="btn">Read More</button>
</div>
This question already has answers here:
Why does the outer <div> here not completely surround the inner <div>?
(2 answers)
Closed 3 years ago.
See the following (very simple) page markup:
<div style="border: 3px dotted lightpink;">
<div style="border: 3px dotted lightblue;">
Normal div
</div>
<div style="width: 2500px; height: 200px; border: 3px dotted lightgray;">
Overflow div
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sit amet justo donec enim diam vulputate ut. Et odio pellentesque diam volutpat commodo sed egestas egestas fringilla. Gravida neque convallis a cras semper auctor. Scelerisque fermentum dui faucibus in ornare quam. Odio euismod lacinia at quis. Est sit amet facilisis magna. Sit amet nulla facilisi morbi tempus. Id velit ut tortor pretium viverra suspendisse potenti nullam. Consequat nisl vel pretium lectus quam id. Magna fermentum iaculis eu non diam phasellus vestibulum lorem sed. Sed odio morbi quis commodo odio aenean.
</div>
</div>
Why does the outermost container (with pink border) not grow horizontally to enclose the innermost overflown container (grey border). It does grow vertically to fit, I would expect it should also grow horizontally.
Just use display: inline-block in pink container:
<div style="border: 3px dotted lightpink;display:inline-block">
<div style="border: 3px dotted lightblue;">
Normal div
</div>
<div style="width: 2500px; height: 200px; border: 3px dotted lightgray;">
Overflow div
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sit amet justo donec enim diam vulputate ut. Et odio pellentesque diam volutpat commodo sed egestas egestas fringilla. Gravida neque convallis a cras semper auctor. Scelerisque fermentum dui faucibus in ornare quam. Odio euismod lacinia at quis. Est sit amet facilisis magna. Sit amet nulla facilisi morbi tempus. Id velit ut tortor pretium viverra suspendisse potenti nullam. Consequat nisl vel pretium lectus quam id. Magna fermentum iaculis eu non diam phasellus vestibulum lorem sed. Sed odio morbi quis commodo odio aenean.
</div>
</div>
Today I tried out this slider and discovered a weird behaviour if an element above the slider is flexbox. The slider just doesn't count in the max-width.
In the codepen example https://codepen.io/obendev/pen/wbzXEa I tried showing it to you as best as possible.
var swiper = new Swiper(".swiper-container", {
// spaceBetween: "8px",
loop: true
});
* {
box-sizing: border-box;
margin: 0;
outline: none;
padding: 0;
}
html {
font-family: "Google Sans", sans-serif;
font-size: 16px;
font-weight: 400;
}
body {
background: #fff;
}
.site-width {
border: 2px solid #f44336;
margin: 2rem auto;
max-width: 80rem;
padding: 3.125rem;
}
.c-text-slider {
display: flex;
justify-content: space-between;
}
.c-text-slider__text {
border: 2px solid #f44336;
max-width: 200px;
padding: 0.5rem;
}
.c-text-slider__slider {
border: 2px solid #f44336;
padding: 0.5rem;
}
.c-text-slider__text + .c-text-slider__slider {
margin-left: 0.5rem;
}
.myelement {
border: 2px solid #f44336;
padding: 0.5rem;
}
<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="site-width">
<div class="c-text-slider">
<div class="c-text-slider__text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Donec ultrices tincidunt arcu non sodales neque.</p>
</div>
<div class="c-text-slider__slider">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide myelement">
<p>1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Donec ultrices tincidunt arcu non sodales neque. Scelerisque varius morbi enim nunc faucibus a pellentesque.
Faucibus turpis in eu mi bibendum neque egestas. Luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor purus. Tempor nec feugiat nisl pretium. Ridiculus mus mauris vitae ultricies leo integer.</p>
</div>
<div class="swiper-slide myelement">
<p>2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Donec ultrices tincidunt arcu non sodales neque. Scelerisque varius morbi enim nunc faucibus a pellentesque.
Faucibus turpis in eu mi bibendum neque egestas. Luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor purus. Tempor nec feugiat nisl pretium. Ridiculus mus mauris vitae ultricies leo integer.</p>
</div>
<div class="swiper-slide myelement">
<p>3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Donec ultrices tincidunt arcu non sodales neque. Scelerisque varius morbi enim nunc faucibus a pellentesque.
Faucibus turpis in eu mi bibendum neque egestas. Luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor purus. Tempor nec feugiat nisl pretium. Ridiculus mus mauris vitae ultricies leo integer.</p>
</div>
<div class="swiper-slide myelement">
<p>4 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Donec ultrices tincidunt arcu non sodales neque. Scelerisque varius morbi enim nunc faucibus a pellentesque.
Faucibus turpis in eu mi bibendum neque egestas. Luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor purus. Tempor nec feugiat nisl pretium. Ridiculus mus mauris vitae ultricies leo integer.</p>
</div>
</div>
</div>
</div>
</div>
</div>
When using spaceBetween it does fit in the given size, although than I can't slide properly anymore.
I could give the upper element an max-width as well but this just doesn't feel right. Is this a bug or am I doing something wrong?
Here are 2 screenshots as well:
When visiting the site:
(source: legilimens.de)
After page resize:
(source: legilimens.de)
The property spaceBetween is a number and instead of giving 8px you can just give 8. The overflow issue is because the container of the swiper is a flex item and the default size is as much as its contents - so you can override this behaviour using min-width: 0.
See complete demo below and updated codepen:
var swiper = new Swiper(".swiper-container", {
spaceBetween: 8,
loop: true
});
* {
box-sizing: border-box;
margin: 0;
outline: none;
padding: 0;
}
html {
font-family: "Google Sans", sans-serif;
font-size: 16px;
font-weight: 400;
}
body {
background: #fff;
}
.site-width {
border: 2px solid #f44336;
margin: 2rem auto;
max-width: 80rem;
padding: 3.125rem;
}
.c-text-slider {
display: flex;
justify-content: space-between;
}
.c-text-slider__text {
border: 2px solid #f44336;
max-width: 200px;
padding: 0.5rem;
}
.c-text-slider__slider {
border: 2px solid #f44336;
padding: 0.5rem;
min-width: 0;
}
.c-text-slider__text + .c-text-slider__slider {
margin-left: 0.5rem;
}
.myelement {
border: 2px solid #f44336;
padding: 0.5rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css" rel="stylesheet"/>
<div class="site-width">
<div class="c-text-slider">
<div class="c-text-slider__text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Donec ultrices tincidunt arcu non sodales neque.</p>
</div>
<div class="c-text-slider__slider">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide myelement">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Donec ultrices tincidunt arcu non sodales neque. Scelerisque varius morbi enim nunc faucibus a pellentesque.
Faucibus turpis in eu mi bibendum neque egestas. Luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor purus. Tempor nec feugiat nisl pretium. Ridiculus mus mauris vitae ultricies leo integer.</p>
</div>
<div class="swiper-slide myelement">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Donec ultrices tincidunt arcu non sodales neque. Scelerisque varius morbi enim nunc faucibus a pellentesque.
Faucibus turpis in eu mi bibendum neque egestas. Luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor purus. Tempor nec feugiat nisl pretium. Ridiculus mus mauris vitae ultricies leo integer.</p>
</div>
<div class="swiper-slide myelement">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Donec ultrices tincidunt arcu non sodales neque. Scelerisque varius morbi enim nunc faucibus a pellentesque.
Faucibus turpis in eu mi bibendum neque egestas. Luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor purus. Tempor nec feugiat nisl pretium. Ridiculus mus mauris vitae ultricies leo integer.</p>
</div>
<div class="swiper-slide myelement">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Donec ultrices tincidunt arcu non sodales neque. Scelerisque varius morbi enim nunc faucibus a pellentesque.
Faucibus turpis in eu mi bibendum neque egestas. Luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor purus. Tempor nec feugiat nisl pretium. Ridiculus mus mauris vitae ultricies leo integer.</p>
</div>
</div>
</div>
</div>
</div>
</div>
PS: Adding min-height: 0 is to override the default min-height: auto for flex items in column direction - read more details here:
Why don't flex items shrink past content size?
You can see some examples of this behavior:
Flexbox affects overflow-wrap behavior
Flexbox resize and scrollable overflow