The green line should be drawn threw until the bottom as a timeline. The length is calculated by each sections of unique cssgrid height in JavaScript.
All entries look absolutely the same by codebase, but for any reason only the topmost is displayed.
I've tried to play around with position: absolute and position: relative for both the content and the green line, but it didn't work.
Is there something hidden or above the other?
#cssgrid {
display: grid;
grid-template-columns: 50px auto;
grid-template-rows: 60px 40xp auto;
grid-template-areas: "b h" "b t" "b d";
}
<div>
<div id="line" style="position: absolute;"></div>
<div id="cssgrid">
<div id="grid-bulletpoint">
<div class="bulletpoint"></div>
</div>
<div id="grid-headline">
<h2>...</h2>
</div>
<div id="grid-time">
<p>...</p>
</div>
<div id="grid-description">
<p>...</p>
</div>
</div>
</div>
You can use the pseudo class :before to add the dot by making it position:absolute.
#cssgrid {
margin-left: 100px;
}
.boxContainer {
border-left: 5px solid green;
padding-left: 37px;
margin-bottom: -20px;
padding-top: 20px;
}
.grid-headline {
position: relative;
}
.grid-headline:before {
content: ' ';
width: 20px;
height: 20px;
background: orange;
position: absolute;
left: -50px;
top: 0;
border-radius: 50%;
}
#grid-description p {
margin-bottom: 0;
}
<div id="cssgrid">
<div class="boxContainer">
<div class="grid-headline">
<h2>Entry</h2>
</div>
<div id="grid-time">
<p>1989</p>
</div>
<div id="grid-description">
<p>Lorem ipsum text...</p>
</div>
</div>
<div class="boxContainer">
<div class="grid-headline">
<h2>Entry</h2>
</div>
<div id="grid-time">
<p>1989</p>
</div>
<div id="grid-description">
<p>Lorem ipsum text...</p>
</div>
</div>
</div>
You may organize differently your grid. See the Timeline Grid here This is the beauty of CSS Grid in my opinion.
Check this code:
(At the end I added the code for the svg if you want to use it too)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Grid CSS Timelin</title>
<style>
#thetime {
display: grid;
grid-template-columns: 50px 1fr;
grid-template-rows: 1fr 1fr 1fr;
}
#timeline {
background-color: rgba(193, 240, 104, 0.36);
border: 1px solid #0031ff;
justify-self: center;
}
.timebar {
width: 10px;
height: 100%;
color: transparent;
background-color: #00ff1d;
}
ul {
list-style: none;
justify-self: start;
margin-left: 0;
padding: 0;
}
li {
background-color: rgba(141, 240, 240, 0.36);
border: 1px solid #ff00ff;
margin: 1.5 rem 0;
position: relative;
}
li:before {
content: " ";
background-size: cover;
background-image: url("/circle2.svg");
width: 1.5rem;
height: 1.5rem;
position: absolute;
left: -2.3rem;
margin-top: 1.25rem;
}
h2 {
}
time {
font-family: monospace;
}
p {
}
</style>
</head>
<body>
<section id="thetime">
<div id="timeline">
<div class="timebar">X</div>
</div>
<ul>
<li>
<h2>
Entry #1
</h2>
<time>
01.01.1900 - 31.12.1900
</time>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus aperiam praesentium totam nihil, molestiae officiis reiciendis voluptatum numquam! Ab inventore quos repudiandae, accusamus quibusdam blanditiis facere optio asperiores aliquam consectetur.
</p>
</li>
<li>
<h2>
Entry #2
</h2>
<time>
01.01.1900 - 31.12.1900
</time>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus aperiam praesentium totam nihil, molestiae officiis reiciendis voluptatum numquam! Ab inventore quos repudiandae, accusamus quibusdam blanditiis facere optio asperiores aliquam consectetur.
</p>
</li>
<li>
<h2>
Entry #3
</h2>
<time>
01.01.1900 - 31.12.1900
</time>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus aperiam praesentium totam nihil, molestiae officiis reiciendis voluptatum numquam! Ab inventore quos repudiandae, accusamus quibusdam blanditiis facere optio asperiores aliquam consectetur.
</p>
</li>
<li>
<h2>
Entry #4
</h2>
<time>
01.01.1900 - 31.12.1900
</time>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus aperiam praesentium totam nihil, molestiae officiis reiciendis voluptatum numquam! Ab inventore quos repudiandae, accusamus quibusdam blanditiis facere optio asperiores aliquam consectetur.
</p>
</li>
</ul>
</section>
</body>
</html>
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFF00;}
</style>
<circle class="st0" cx="10" cy="10" r="10"/>
</svg>
Related
Desired outcome: I have three columns. I need them to be all the same width, as well as text and buttons to be on the same level in all three of them.
Problem: Depending on the number of words, columns become wider and buttons start to jump when text is resizing, and all three texts are resizing on a different points. I need to prevent that. How can I achieve this?
HTML:
<section class="sub-offer">
<div class="offer-container">
<div class="offer-up">
<h2>Lorem, ipsum.</h2>
<img src="https://via.placeholder.com/150x150.png/09f/fff" alt="" />
</div>
<div class="offer-down">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus a
rerum sapiente odit porro obcaecati fugit, maxime modi veritatis
quis!
</p>
</div>
<div class="more-btn">
Lorem, ipsum.
</div>
</div>
<div class="offer-container">
<div class="offer-up">
<h2>Lorem, ipsum.</h2>
<img src="https://via.placeholder.com/150x150.png/09f/fff" alt="" />
</div>
<div class="offer-down">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi
perspiciatis voluptas qui iste, voluptatem atque ab rerum illum quia
incidunt odio?
</p>
</div>
<div class="more-btn">
Lorem, ipsum.
</div>
</div>
<div class="offer-container">
<div class="offer-up">
<h2>Lorem, ipsum.</h2>
<img src="https://via.placeholder.com/150x150.png/09f/fff" alt="" />
</div>
<div class="offer-down">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae
vitae aut fugit dicta repellendus dolorem, quam, accusamus hic nemo
ullam quod porro atque error?
</p>
</div>
<div class="more-btn">
Lorem, ipsum.
</div>
</div>
</section>
CSS:
.sub-offer {
text-align: center;
display: flex;
position: relative;
.offer-container {
background: linear-gradient(to bottom right, #2e2e3b, #0f1519);
}
h2 {
font-family: 'Playfair Display', serif;
font-size: 15px;
position: absolute;
margin-left: auto;
margin-right: auto;
margin-top: 4.3em;
width: 33%;
text-align: center;
}
p {
font-size: 12px;
margin-top: 2em;
padding: 0 0.5em 0 0.5em;
font-family: 'Montserrat', sans-serif;
}
a {
display: inline-block;
font-family: 'Montserrat', sans-serif;
font-size: 12px;
background: white;
margin: 3em 0 2.5em 0;
padding: 0.5em;
text-decoration: none;
color: black;
&:hover {
background: #e5e5e5;
}
}
}
How they look now:
You can add a media query to change the flex-direction when the screen resizes.
Add the following indie .sub-offer class.
#media(max-width: 600px){
flex-direction: column;
}
Add the following inside h2 element.
#media(max-width: 600px){
width: 100%;
}
I solved my issue. To give all three columns the same width I've used what #tacoshy recommended in the comments: section.sub-offer { display: flex; } .offer-container { width: calc(100% / 3); }
To align all three buttons though leaving all them responsive I've wrapped my button into a div and used the following css:
.more-btn {
display: flex;
align-self: center;
margin-top: auto;
}
I'm not really a good dev, but I can give it a try. What I do when I want to make things line up perfectly is use grid, so I tried adding it to .offer-container like this .offer-container {display: grid; grid-template-rows: 1fr 1fr 1fr;}. A working example is below. Though, since I'm new to helping people on StackOverflow or really StackOverflow in general, I'm sure I didn't do something right. for example, providing a solution to a different problem or fixing issues that you didn't as for. If you need a list of what I changed, you can see that here: added } for sub-offer removed extra closing bracket on a{} separated &:hover to a:hover{} made <p> text white. I hope this is the solution you were looking for if your problem hasn't already been fixed.
.sub-offer {
text-align: center;
display: flex;
position: relative;
width:100px
}
.offer-container {
background: linear-gradient(to bottom right, #2e2e3b, #0f1519);
display: grid;
grid-template-rows: 1fr 1fr 1fr;
}
h2 {
font-family: 'Playfair Display', serif;
font-size: 15px;
position: absolute;
margin-left: auto;
margin-right: auto;
margin-top: 4.3em;
width: 33%;
text-align: center;
}
p {
font-size: 12px;
margin-top: 2em;
padding: 0 0.5em 0 0.5em;
font-family: 'Montserrat', sans-serif;
color: white;
}
a {
display: inline-block;
font-family: 'Montserrat', sans-serif;
font-size: 12px;
background: white;
margin: 3em 0 2.5em 0;
padding: 0.5em;
text-decoration: none;
color: black;
}
a:hover {
background: #e5e5e5;
}
<section class="sub-offer">
<div class="offer-container">
<div class="offer-up">
<h2>Lorem, ipsum.</h2>
<img src="https://via.placeholder.com/150x150.png/09f/fff" alt="" />
</div>
<div class="offer-down">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus a
rerum sapiente odit porro obcaecati fugit, maxime modi veritatis
quis!
</p>
</div>
<div class="more-btn">
Lorem, ipsum.
</div>
</div>
<div class="offer-container">
<div class="offer-up">
<h2>Lorem, ipsum.</h2>
<img src="https://via.placeholder.com/150x150.png/09f/fff" alt="" />
</div>
<div class="offer-down">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi
perspiciatis voluptas qui iste, voluptatem atque ab rerum illum quia
incidunt odio?
</p>
</div>
<div class="more-btn">
Lorem, ipsum.
</div>
</div>
<div class="offer-container">
<div class="offer-up">
<h2>Lorem, ipsum.</h2>
<img src="https://via.placeholder.com/150x150.png/09f/fff" alt="" />
</div>
<div class="offer-down">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae
vitae aut fugit dicta repellendus dolorem, quam, accusamus hic nemo
ullam quod porro atque error?
</p>
</div>
<div class="more-btn">
Lorem, ipsum.
</div>
</div>
</section>
I have a text and an image overlapping it. What code can I write that makes the image go below the text when A media query is fired. I tried making that text a block element so that the image goes below but nothing happened.
I also tried making the container's flex-direction column but that didn't made any change too
Here's the code
<!DOCTYPE html>
<html lang="en" class="html">
<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">
<title>Shivansh</title>
<style>
* {
margin: 0px;
}
html {
scroll-behavior: smooth;
}
/* width */
.homeimgandtextcont {
display: flex;
flex-wrap: wrap;
}
.homeimg {
width: 799.557px;
height: 640px;
position: relative;
left: 50%;
}
.homeheading {
width: 100px;
height: 67px;
position: relative;
top: 16rem;
color: black;
font-family: 'serif';
font-size: 52px;
margin-left: 19px;
}
.hometext {
position: relative;
top: -320px;
color: black;
font-family: 'serif';
margin-left: 24px;
}
</style>
</head>
<body>
<section class="sectionhome" id="sectionhome">
<div class="homecont">
<div class="homeimgandtextcont">
<h1 class="homeheading">
Sample
</h1>
<img class="homeimg" src="https://expo8.netlify.app/logoo.png" alt="Image">
<p class="hometext">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta culpa vero iure autem provident nobis doloremque, ducimus dolore, dicta praesentium tenetur, sunt eius officia et sit magni iste. Esse, quisquam.
</p>
</div>
</div>
</section>
</body>
</html>
Your CSS is a a bit confusing. Stuff like top: -320px; should not exist in a ' good written ' css. If you need to do stuff like that you might need to rethink the HTML structure.
Anyway. The easiest way to change the positions of elements is with flexbox.
You can wrap your text and img in a div and for desktop use display:flex; flex-direction:row and in your media query you can use flex-direction:column . So the image will be after( below ) the text.
Check sample below or jsfiddle and adjust it to your specific needs
div {
display:flex;
flex-direction:row;
flex-wrap:wrap;
}
img, p {
flex: 0 0 50%;
}
#media only screen and (max-width:320px) {
div {
flex-direction: column;
}
img,p {
flex: 0 0 100%
}
}
<div class="homeimgandtextcont">
<p class="hometext">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta culpa vero iure autem provident nobis doloremque, ducimus dolore, dicta praesentium tenetur, sunt eius officia et sit magni iste. Esse, quisquam.
</p>
<img class="homeimg" src="https://via.placeholder.com/150" alt="Image" />
</div>
I am following a series of Traversy Media videos for creating a portfolio website. I have a foundational knowledge of HTML/CSS. We have to create a grid and no matter what I do, I cannot get the grid to show up in my browser (Chrome). The grid will be for the About info on the about page. Also the footer isn't showing up for some reason. Any help would be greatly appreciated.
Here is the about.html
<!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">
<script src="https://kit.fontawesome.com/31d2c226f4.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/main.css">
<title>About Me</title>
</head>
<body>
<div class="overlay"></div>
<header>
<div class="menu-btn">
<div class="btn-line"></div>
<div class="btn-line"></div>
<div class="btn-line"></div>
</div>
<nav class="menu">
<div class="menu-branding">
<div class="portrait"></div>
</div>
<ul class="menu-nav">
<li class="nav-item">
<a href="/" class="nav-link">
Home
</a>
</li>
<li class="nav-item current">
<a href="about.html" class="nav-link">
About Moi
</a>
</li>
<li class="nav-item">
<a href="work.html" class="nav-link">
My Work
</a>
</li>
<li class="nav-item">
<a href="Contact.html" class="nav-link">
How to Reach Me
</a>
</li>
</ul>
</nav>
</header>
<main id="about">
<h1 class="lg-heading">
About
<span class="text-secondary">Me</span>
</h1>
<h2 class="sm-heading">
Let me tell you a few things...
</h2>
<div class="about-info">
<!-- <img src="img/portrait.jpeg" alt="Alex Gool" class="bio-image"> -->
<div class="bio">
<h3 class="text-secondary">BIO</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem dolore at, quasi natus veritatis, amet cum voluptates, iste fugit atque autem laboriosam. Provident officia modi inventore fugit recusandae vitae nisi.</p>
</div>
<div class="job job-1">
<h3>123 Webshop</h3>
<h6>Full Stack Developer</h6>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nisi ipsum aperiam inventore. Inventore illo accusamus debitis facilis, quisquam velit aliquam?</p>
</div>
<div class="job job-2">
<h3>Designers ABC</h3>
<h6>Front End Developer</h6>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nisi ipsum aperiam inventore. Inventore illo accusamus debitis facilis, quisquam velit aliquam?</p>
</div>
<div class="job job-3">
<h3>Webworks</h3>
<h6>Graphic Designer</h6>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nisi ipsum aperiam inventore. Inventore illo accusamus debitis facilis, quisquam velit aliquam?</p>
</div>
</div>
</main>
<footer id="main-footer">
Copyright © 2021
</footer>
<script src="js/main.js"></script>
</body>
</html>
And here is the main SCSS file
// Move variable and functions to _config.scss file. This helps tidy up the main.scss file and makes the code more readable. Use #import then the file name (NOT WITH THE .scss EXTENSION).
#import "config";
#import "menu";
// Ensures inside padding will not affect height/width of box, it will just be in the box itself.
* {
box-sizing: border-box;
}
body {
#include background;
background: $primary-color;
color: set-text-color($primary-color);
height: 100%;
margin: 0;
font-family: "Segoe UI", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.5;
}
// Headings
h1,
h2,
h3 {
margin: 0;
font-weight: 400;
&.lg-heading {
font-size: 6rem;
}
&.sm-heading {
margin-bottom: 2rem;
padding: 0.2rem 1rem;
// Background to heading information will be lighter.
// Wrap in RGBA function, 0.5 is the opacity.
background: rgba(lighten($primary-color, 2), 0.5);
}
}
a {
color: #fff;
text-decoration: none;
}
// Header (icon) is fixed so it stays at top right when user scrolls through the webpage.
header {
position: fixed;
z-index: 2;
width: 100%;
}
.text-secondary {
color: $secondary-color;
}
// Nesting the .icons class so that only the icons in the main tag will be affected. This is specific to SASS.
main {
padding: 4rem;
// height: 100%;
min-height: calc(100vh - 60px);
.icons {
margin-top: 1rem;
color: set-text-color($primary-color);
// Inside the div class "icons", each icon is wrapped in a link.
a {
padding: 0.4rem;
// Putting the & in things is specific to SASS, this is not a feature of normal CSS.
&:hover {
color: $secondary-color;
#include easeOut();
}
}
}
&#home {
// This makes it so that there will never be scroll bars.
overflow: hidden;
h1 {
// This brings my name down closer to the middle of the page.
margin-top: 20vh;
}
}
}
.about-info {
display: grid !important;
grid-template-columns: 1fr 1fr 1fr !important;
grid-template-rows: auto !important;
grid-template-areas:
"bioimage bio bio"
" job1 job2 job3" !important;
.bio-image {
grid-area: bioimage;
margin: auto;
border-radius: 50%;
border: $secondary-color 3px solid;
}
.bio {
grid-area: bio;
font-size: 1.5rem;
}
.job-1 {
grid-area: job1;
}
.job-2 {
grid-area: job2;
}
.job-3 {
grid-area: job3;
}
.job {
background: lighten($primary-color: 5);
padding: 0.5rem;
border-bottom: $secondary-color 5px solid;
}
}
#main-footer {
text-align: center;
padding: 1rem;
background: darken($primary-color: 10);
color: set-text-color($primary-color);
height: 60px;
}
#import "mobile";
I took this snippet from the code you linked and rewrote it without SCSS so it can compile below. It seems to me like display: grid is working just fine. If you open the chrome dev tools and inspect, you will see a "grid" label on the .about-info element.
.about-info {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto;
grid-template-areas: "bioimage bio bio" " job1 job2 job3" !important;
}
.about-info .job-1 {
grid-area: job1;
}
.about-info .job-2 {
grid-area: job2;
}
.about-info .job-3 {
grid-area: job3;
}
.about-info .bio {
grid-area: bio;
font-size: 1.5rem;
}
.about-info .bio-image {
grid-area: bioimage;
margin: auto;
border-radius: 50%;
border: $secondary-color 3px solid;
}
.about-info .job {
background: lighten($primary-color: 5);
padding: 0.5rem;
border-bottom: $secondary-color 5px solid;
}
<div class="about-info">
<div class="bio">
<h3 class="text-secondary">BIO</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem dolore at, quasi natus veritatis, amet cum voluptates, iste fugit atque autem laboriosam. Provident officia modi inventore fugit recusandae vitae nisi.</p>
</div>
<div class="job job-1">
<h3>123 Webshop</h3>
<h6>Full Stack Developer</h6>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nisi ipsum aperiam inventore. Inventore illo accusamus debitis facilis, quisquam velit aliquam?</p>
</div>
<div class="job job-2">
<h3>Designers ABC</h3>
<h6>Front End Developer</h6>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nisi ipsum aperiam inventore. Inventore illo accusamus debitis facilis, quisquam velit aliquam?</p>
</div>
<div class="job job-3">
<h3>Webworks</h3>
<h6>Graphic Designer</h6>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nisi ipsum aperiam inventore. Inventore illo accusamus debitis facilis, quisquam velit aliquam?</p>
</div>
</div>
"I am reducing width of screen but text of paragraph overrides the image, what changes should I do to prevent overriding text "
"This is for a part website building , I tried to play with some css3 properties here in code but couldnt resolve problem "
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
#facilities{
height: 430px;
background: #fff;
}
#facilities .facility-img {
width: 40%;
float: left;
}
#facilities .facility-img img{
width: 600px;
border-radius: 50%;
padding: 30px 70px;
}
#facilities .facility-info{
float: right;
width: 50%;
text-align: center;
padding-top: 60px;
}
#facilities .facility-info h1{
color: #333;
}
#facilities .facility-info p{
color: #333;
}
</style>
</head>
<body>
<section id="facilities">
<div class="container">
<div class="facility-img ">
<img src="https://images.pexels.com/photos/1170979/pexels-photo-1170979.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="facility-photo">
</div>
<div class="facility-info">
<h1>In a hospital , half of the patients get better food than at home.</h1>
<p>~Gerhard KocSher</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.Sit autem ducimus delectus nam aut neque vitae, ab repellendus, qui, quibusdam eum commodi sunt? Non veniam quos illo, assumenda doloremque sit possimus sunt architecto quo neque doloribus provident consequuntur eius error.
</p>
</div>
</div>
</section>
</body>
</html>
Change width: 600px to width: 100% on yor image.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
#facilities{
height: 430px;
background: #fff;
}
#facilities .facility-img {
width: 40%;
float: left;
}
#facilities .facility-img img{
width: 100%;
border-radius: 50%;
padding: 30px 70px;
}
#facilities .facility-info{
float: right;
width: 50%;
text-align: center;
padding-top: 60px;
}
#facilities .facility-info h1{
color: #333;
}
#facilities .facility-info p{
color: #333;
}
</style>
</head>
<body>
<section id="facilities">
<div class="container">
<div class="facility-img ">
<img src="https://images.pexels.com/photos/1170979/pexels-photo-1170979.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="facility-photo">
</div>
<div class="facility-info">
<h1>In a hospital , half of the patients get better food than at home.</h1>
<p>~Gerhard KocSher</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.Sit autem ducimus delectus nam aut neque vitae, ab repellendus, qui, quibusdam eum commodi sunt? Non veniam quos illo, assumenda doloremque sit possimus sunt architecto quo neque doloribus provident consequuntur eius error.
</p>
</div>
</div>
</section>
</body>
</html>
You need to set your image width to 100% so that it stretches or shrinks according to its parent width (the div). The div parent is set to 40% of its parent container, which is the window.
That being said, your padding is still in "px" and so not proportional to your window. When you shrink your window a lot, you will end up with lots of padding compared to the window size. Think about changing those values too.
I wonder if this is even possible without modifying the HTML, but, say that you have a list of inline-block elements of a variable width that are dynamically added. You don't want any margin between the elements and the parent, but in case they start forming two lines, you'd like to have some space between them.
I've tried ::first-line but it doesn't work for margins. So does anyone know how to do this?
Take this example:
.parent {
margin: 20px;
background: #555;
padding: 1px;
}
.parent p {
display: inline-block;
margin: 0;
margin-right: 5px;
padding: 0;
background: #CCC;
}
.parent::first-line {
margin-bottom: 10px;/* not working */
}
<div class="parent">
<p>Lorem ipsum dolor</p>
<p>sit amet,</p>
<p>consectetur adipisicing elit.</p>
<p>Tempora,</p>
<p>numquam, reiciendis.</p>
<p>Voluptatum molestias,</p>
<p>sequi iste itaque corporis ducimus,</p>
<p>vero commodi sed fugiat</p>
<p>qui a perferendis sint,</p>
<p>magnam doloribus quidem.</p>
</div>
This can be achieved by setting a margin-top to the children and a negative margin to the parent. By this, it will pull the children to the top removing the space between them.
Bootstrap's row and col- works this way.
.parent {
margin: -18px 0;
background: #555;
padding: 1px;
}
.parent p {
display: inline-block;
margin: 0;
margin-right: 5px;
padding: 0;
background: #CCC;
margin-top: 10px;
}
<div class="parent">
<p>Lorem ipsum dolor</p>
<p>sit amet,</p>
<p>consectetur adipisicing elit.</p>
<p>Tempora,</p>
<p>numquam, reiciendis.</p>
<p>Voluptatum molestias,</p>
<p>sequi iste itaque corporis ducimus,</p>
<p>vero commodi sed fugiat</p>
<p>qui a perferendis sint,</p>
<p>magnam doloribus quidem.</p>
<p>sequi iste itaque corporis ducimus,</p>
<p>vero commodi sed fugiat</p>
<p>qui a perferendis sint,</p>
<p>magnam doloribus quidem.</p>
<p>sequi iste itaque corporis ducimus,</p>
<p>vero commodi sed fugiat</p>
<p>qui a perferendis sint,</p>
<p>magnam doloribus quidem.</p>
<p>sequi iste itaque corporis ducimus,</p>
<p>vero commodi sed fugiat</p>
<p>qui a perferendis sint,</p>
<p>magnam doloribus quidem.</p>
</div>
You can add the given script to know the top positions of first and last element of P, and and can remove the top margin for Ps in first row, and can remove bottom margin for Ps in last row.
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script type="text/javascript">
$( document ).ready(function() {
$("p").each(function( index )
{
var offsetMin =$("p:first-child").offset().top;
var offsetMax =$("p:last-child").offset().top;
if($(this).offset().top==offsetMax)
{
$(this).css("margin-bottom","0px");
}
else if($(this).offset().top==offsetMin)
{
$(this).css("margin-top","0px");
}
});
});
</script>
First of all, "parent" is a class defined for div, so you're trying to apply bottom margin to div, which is wrong,
The solution of this is you modify your code to this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.parent {
margin: 20px;
background: #555;
padding: 1px;
}
.parent p {
display: inline-block;
margin: 0;
margin-right: 5px;
padding: 0;
background: #CCC;
}
.parent p::first-line { //Line modified by Dixit, added " p"
margin-bottom: 10px;/* not working */
}
</style>
</head>
<body>
<div class="parent">
<p>Lorem ipsum dolor</p>
<p>sit amet,</p>
<p>consectetur adipisicing elit.</p>
<p>Tempora,</p>
<p>numquam, reiciendis.</p>
<p>Voluptatum molestias,</p>
<p>sequi iste itaque corporis ducimus,</p>
<p>vero commodi sed fugiat</p>
<p>qui a perferendis sint,</p>
<p>magnam doloribus quidem.</p>
</div>
</body>
</html>
But still it will not work, the reason is because you've already set the margin to 0, inside .parent p{} block, the way you can achieve it is by removing the margin:0; line from .parent p{} block which will result in following code.
.parent {
margin: 20px;
background: #555;
padding: 1px;
}
.parent p {
display: inline-block;
//Line removed by Dixit, Line : margin:0px;
margin-right: 5px;
padding: 0;
background: #CCC;
}
.parent p::first-line {
//Line modified by Dixit, added " p"
margin-bottom: 10px;
/* not working */
}
<div class="parent">
<p>Lorem ipsum dolor</p>
<p>sit amet,</p>
<p>consectetur adipisicing elit.</p>
<p>Tempora,</p>
<p>numquam, reiciendis.</p>
<p>Voluptatum molestias,</p>
<p>sequi iste itaque corporis ducimus,</p>
<p>vero commodi sed fugiat</p>
<p>qui a perferendis sint,</p>
<p>magnam doloribus quidem.</p>
</div>