"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.
Related
I'm creating an 'About' section for a website, which is a table with three equal-width columns: a headshot, a paragraph, and another paragraph (see screenshots below).
I'd like to have the image automatically resize (keeping its aspect ratio) to be the height of the largest text- aligned left within the cell- without hardcoding any height/width values. However, I've played around a bunch and nothing seems to make the image resize.
/* an element that's one-third the width of its container */
.third-width {
width: 33%;
}
/* the headshot photo */
#headshot {
border-radius: 5px;
max-width: 100%;
max-height: 100%;
display: inline-block;
}
#about-table td {
background-color: pink;
padding: 1vw;
text-align: justify;
vertical-align: top;
font-family: var(--body-font);
font-weight: lighter;
}
<table id="about-table">
<tr>
<td class="third-width">
<img id="headshot" src="https://via.placeholder.com/80" alt="None">
</td>
<td class="third-width">
<p>[... SOME TEXT ...]</p>
</td>
<td class="third-width">
<p>[... SOME TEXT ...]</p>
</td>
</tr>
Current state:
What I would like:
Thank you!
Use CSS Flex instead of table
Make the cells flex: 1; position: relative;
Make the image position: absolute; with 100% W/H and object-fit: cover to not distort the image
/* QuickReset */
* { margin:0; box-sizing: border-box; }
/* About component */
.About {
display: flex;
}
.About > div {
position: relative;
flex: 1;
outline: 1px solid #000;
padding: 20px;
}
.About > div img {
position: absolute;
top:0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
<div class="About">
<div><img src="https://placekitten.com/408/287" alt="Catz!"></div>
<div>Lorem ipsum</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae sunt nisi nostrum sed, assumenda sequi doloribus excepturi quibusdam obcaecati tenetur tempora voluptatibus eligendi dolorem. Excepturi perspiciatis ipsa porro, minus ea.</div>
</div>
<div class="About">
<div>Lorem ipsum</div>
<div>Molestiae sunt nisi nostrum sed, ipsa porro, minus ea.</div>
<div><img src="https://placekitten.com/500/300" alt="Catz!"></div>
</div>
<div class="About">
<div><img src="https://placekitten.com/310/290" alt="Catz!"></div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae sunt nisi nostrum sed, assumenda sequi doloribus excepturi quibusdam obcaecati tenetur</div>
<div>Lorem ipsum</div>
</div>
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>
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>
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>
I'm trying to get a border around my image and paragraphs items but I can't figure out how to do it. I encased them in divs and added a class to them but the background color and border effects do nothing. This is what i'm shooting for:
this is what my HTML code looks like for this section:
<div class="pair">
<a href="GPA_Calc_Screen.png">
<img src="GPA_Calc_Screen.png" alt""> <!--Relative img path -->
</a>
<p>
This is a custom GPA Calculator, and what I like to think is the first real app that I made. Going to Georgia Tech, and college in general, this is a vital asset. Although at GT we don't operate on the plus/minus system, I added a setting in which you can edit that if you want.
</p>
</div>
and here is my CSS:
.pair div {
display: block;
/*padding: 5px;
clear: right;
width: 100%;
border-radius: 5px;
border-width: 3px;
border-color: red;*/
background: red;
}
you don't need to add div in front of .pair when you are doing class without id based
you just keep
.pair {
border: 3px rgb(86, 10, 10) solid;
padding: 9px;
display: block;
}
<div class="pair">
<a href="GPA_Calc_Screen.png">
<img src="sourceofimage.png" alt""> <!--Relative img path -->
</a>
<p>
your text
</p>
</div>
for bottom div also you need to add this "pair" class.
You have to add border in .pair class
.pair div
{
display: block;
padding: 5px;
clear: right;
width: 100%;
}
.pair
{
border:3px solid red;
}
Try as in this I have made for you fiddle
If you want use '.pair div {}' you need to place that div inside of div with .pair class
.pair{
display: block;
padding: 5px;
clear: right;
width: 100%;
border-radius: 5px;
border: 5px solid #ff0000;
background: orange;
}
Fixed the problem ,just go to the jsfiddle hereClick Here
div {
border: 3px solid #8AC007;
}
.img1 {
float: left;
}
.clearfix {
overflow: auto;
}
<body>
<div class="clearfix">
<img class="img2" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTUHgZRyJPa3nt3V4hgxAN0K2iFn1MaoYluUIwswewquau2nkdRaA" width="100" height="300">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo culpa, maiores veritatis minima sequi earum. Ad perspiciatis molestias, illum saepe nihil quo nam dignissimos ducimus similique consequatur veniam facilis iure! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit ullam perferendis esse deserunt vel ea alias, officia earum, natus, aspernatur porro. Maiores assumenda distinctio accusantium laudantium voluptate explicabo, aliquid sint.
</div>
</body>
</html>