Trying to get my divs responsive. Can't seem to make this work. The image resizes fine but the text divs do not. They just hide as the page resizes. I probably have not done this right to begin with. Please take a look at it and let me know what I need to change.
Any help you can provide is appreciated.
.responsive .containerCollab {
max-width: 1110px;
}
.containerCollab {
display: grid;
width: 90%;
height: 100%;
max-width: 1110px;
min-width: 500px;
margin: auto;
grid-template-areas: "a-XQDl2-0 NameTitle"
"a-w0pwv-0 HR1"
"left right"
"a-79302-0 HR2";
grid-template-columns: 01fr 4fr;
grid-template-rows: 70px 30px 160px 30px;
}
.containerCollab>div {
border: px dashed #888;
float: left;
}
.a-XQDl2-0 {
grid-area: a-XQDl2-0;
}
.NameTitle {
grid-area: NameTitle;
position: relative;
top: 30px;
left: 75px;
}
.NameTitleText {
font: 28px pt sans, sans-serif;
}
.HR1 {
grid-area: HR1;
position: relative;
top: 30px;
}
.HR1line hr {
max-width: 700px;
width: 700px;
border-color: #3579b5;
}
.HR2 {
grid-area: HR1;
position: relative;
bottom: 20px;
}
.HR2line hr {
max-width: 818px;
width: 818px;
border-color: #3579b5;
}
.left {
grid-area: left;
}
.leftimg {
margin: auto;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
.leftimg img {
width: 250px;
position: relative;
}
.right {
grid-area: right;
margin: auto;
}
.righttext p {
max-width: 78%;
text-align: left;
margin: auto;
position: relative;
float: right;
margin-right: 10%;
width: 100%;
}
.HR2 {
grid-area: HR2;
}
<!DOCTYPE html>
<html>
<head>
<title>HTML, CSS and JavaScript demo</title>
</head>
<body>
<!-- Start your code here -->
<div id="wrap_all">
<div class="containerCollab">
<div class="NameTitle">
<div class="NameTitleText">
<p>Collaborations</p>
</div>
</div>
<div class="HR1">
<div class="HR1line">
<hr />
</div>
</div>
<div class="left">
<div class="leftimg">
<img src="https://www.w3schools.com/html/img_girl.jpg" />
</div>
</div>
<div class="right">
<div class="righttext">
<p>lorem ipsum lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum .<br />
<br />
lorem ipsum lorem ipsumlorem ipsumlorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum.</p>
</div>
</div>
<div class="HR2">
<div class="HR1line">
<hr />
</div>
</div>
</div>
</div>
<!-- End your code here -->
</body>
</html>
If you are looking for responsive webpages, elements on webpages, you might want to look into Bootstrap
If you follow the way they set it up on the page, you will see that it improves.
Also, as some others have mentioned, you do not want fixed px set if you want responsiveness. You rather want vw/vh, percentages.
w3schools has also some easy start demo's on responsiveness. You might want to check it out.
Related
I have a task that supports older browsers such as IE9, so I cannot use flexbox or CSS Grid.
I'm struggling with making the .second and .third have equal height as the .first div.
Here is my attempt.
https://codepen.io/abccba_123/pen/QWKMwpK
img {
width: 100%;
height: auto;
}
.first img {
background-color: gold;
}
.second img {
background-color: cyan;
}
.third img {
background-color: grey;
}
.container {
width: 1000px;
margin: 0 auto;
}
.container article {
position: relative;
}
.wrap {
position: absolute;
bottom: 0;
}
.first {
float: left;
width: 50%;
}
.second {
float: left;
width: 30%;
}
.third {
float: left;
width: 30%;
}
<div class="container">
<article class="first">
<img width="1920" height="1080">
<div class="wrap">
<h3>Lorem ipsum dolor sit amet.<h3>
</div>
</article>
<article class="second">
<img width="1920" height="1080">
<div class="wrap">
<h3>Lorem ipsum dolor sit amet.<h3>
</div>
</article>
<article class="third">
<img width="1920" height="1080">
<div class="wrap">
<h3>Lorem ipsum dolor sit amet.<h3>
</div>
</article>
</div>
What I want.
Thank you!!
You may also use a display:table reset ;) Understood by every browsers and IE8+
(.wrap div removed , but you can use it)
img {
width: 100%;
height: auto;
}
.first {
background-color: gold;
}
.second {
background-color: cyan;
margin-bottom: 5px;
}
.third {
background-color: grey;
}
.container {
width: 100%;/* for demo */
/* width:1000px; */
margin: 0 auto;
display: table;
/* IE8 + */
table-layout: fixed;
/* IE8 + */
border-spacing: 5px;
border: solid;
}
.container article {
border: solid;
margin: -left:5px;
}
h3 {
padding: 1em;
}
.img {
vertical-align: top;
}
.first {
display: table-cell;
/* IE8 + */
width: 50%;
vertical-align: top;
}
<div class="container">
<article class="first">
<img src="https://picsum.photos/id/118/536/354.jpg" width="1920" height="1080">
<h3>Lorem ipsum dolor sit amet. </h3>
</article>
<article class="second">
<img src="https://picsum.photos/id/1015/536/354.jpg" width="1920" height="1080">
<h3>Lorem ipsum dolor sit amet. </h3>
</article>
<article class="third">
<img src="https://picsum.photos/id/1016/536/354.jpg" width="1920" height="1080">
<h3>Lorem ipsum dolor sit amet. </h3>
</article>
</div>
A simple table layout:
img {
display:block;
}
.first img {
background-color: gold;
}
.second img {
background-color: cyan;
}
.third img {
background-color: grey;
}
.container {
margin: 0 auto;
}
.container td {
position: relative;
}
.container td h3 {
position:absolute;
bottom:0;
left:0;
right:0;
}
<table class="container">
<tr>
<td class="first" rowspan="2">
<img width="300" height="400">
<h3>Lorem ipsum dolor sit amet.</h3>
</td>
<td class="second">
<img width="300" height="200">
<h3>Lorem ipsum dolor sit amet.</h3>
</td>
</tr>
<tr>
<td class="third">
<img width="300" height="200">
<h3>Lorem ipsum dolor sit amet.</h3>
</td>
</tr>
</table>
.cont {
width: 1000px;
margin: 0 auto;
}
img {
width: 100%;
height: 100%;
}
article {
position: relative;
}
.first {
float: left;
width: 500px;
height: 300px;
background-color: gold;
}
.second, .third {
float: left;
width: 500px;
height: 150px;
overflow: hidden;
}
.second {
background-color: lime;
}
.third {
background-color: cyan;
}
.info {
color: white;
padding: 10px 10px 0 10px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
<div class="cont">
<article class="first">
<img src="https://picsum.photos/1920/1080" width="1920" height="1080">
<div class="info">
<h3>Lorem ipsum dolor sit amet.</h3>
</div>
</article>
<article class="second">
<img src="https://picsum.photos/1920/1080" width="1920" height="1080">
<div class="info">
<h3>Lorem ipsum dolor sit amet.</h3>
</div>
</article>
<article class="third">
<img src="https://picsum.photos/1920/1080" width="1920" height="1080">
<div class="info">
<h3>Lorem ipsum dolor sit amet.</h3>
</div>
</article>
</div>
I've partially solved my own problem.
I not familiar with css styling but I want to change overflowing type to ellipsis in my text. But instead of shortening text it is making it longer(spilling outside of div).
<html>
<head>
<style>
body {
width: 100px;
}
.displayInline {
display: inline;
}
.infoCellArea {
cursor: pointer;
display: table-cell;
width: 100px;
height: 4.0em;
overflow: hidden;
}
.infoArea {
height: 4.0em;
display: table-cell;
vertical-align: middle;
overflow: hidden;
}
.maxWidth {
width: 100px;
}
.inline {
display: inline;
}
.taskNameStyle {
font-weight: 500;
padding-right: 0.1em;
}
.dateStyle {
padding-left: 0.1em;
padding-right: 0.1em;
}
.titleStyle {
paddingLeft: 0.1em;
}
.cellContent {
-moz-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
text-overflow: ellipsis;
font-size: 0.8571em;
color: #888;
}
.noWrap{
white-space: nowrap;
}
</style>
</head>
<body>
<div tabindex="0" class="infoCellArea displayInline noWrap">
<div class="infoArea maxWidth">
<div class="inline taskNameStyle">Test</div> -
<div class="inline dateStyle">Wednesday</div> -
<div class="inline titleStyle">Done</div>
<div class="cellContent">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem IpsumLorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</div>
</div>
</div>
</body>
</html>
I read that I cannot use % as width and need overflow set as hidden but it seems I am doing it not good.
I would like to achive something like "Lorem Ipsum Lorem Ips..."
Any idea what I am doing wrong?
Remove .maxWidth from .infoArea class and add .maxWidth class in .cellContent.
body {
width: 100px;
}
.displayInline {
display: inline;
}
.infoCellArea {
cursor: pointer;
display: table-cell;
width: 100px;
height: 4.0em;
overflow: hidden;
}
.infoArea {
height: 4.0em;
display: table-cell;
vertical-align: middle;
overflow: hidden;
}
.maxWidth {
width: 100px;
}
.inline {
display: inline;
}
.taskNameStyle {
font-weight: 500;
padding-right: 0.1em;
}
.dateStyle {
padding-left: 0.1em;
padding-right: 0.1em;
}
.titleStyle {
paddingLeft: 0.1em;
}
.cellContent {
-moz-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
text-overflow: ellipsis;
font-size: 0.8571em;
color: #888;
}
.noWrap{
white-space: nowrap;
}
<div tabindex="0" class="infoCellArea displayInline noWrap">
<div class="infoArea">
<div class="inline taskNameStyle">Test</div> -
<div class="inline dateStyle">Wednesday</div> -
<div class="inline titleStyle">Done</div>
<div class="cellContent maxWidth">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem IpsumLorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</div>
</div>
</div>
I am having some issues to add a background color in the 3 sections created in html. Could you please have a look and let me know what I am doing wrong with the coding? I can only see the background color when I write in html style="background-color:whatever color". Looks like the CSS is not applying the changes I am trying over and over.
* {
margin: 0px;
padding: 0px;
}
.container {
margin: auto;
width: 80%;
overflow: hidden;
}
header {
border-bottom: 1px solid green;
background-color: #e7e7e7;
}
#logo {
float: left;
margin-top: 20px;
}
nav {
float: right;
margin-top: 20px;
}
nav li {
float: left;
display: inline;
list-decoration: none;
padding: 20px 20px 20px 20px;
}
nav li a {
color: #333333;
text-decoration: none;
font-weight: bold;
font-size: 18px;
}
--------- #firstpart {
margin-top: 40px;
height: 300px;
background-color: fuchsia;
}
.cajaslider {
margin-top: 20px;
margin-bottom: 20px;
float: left;
border: 1px solid navy;
height: 400px;
width: 55%;
}
#twitter {
padding-top: 5px;
margin-left: 40px;
float: right;
height: 300px;
width: 38%;
}
#columns {
width: 65%;
}
#secondpart {
padding-top: 20px;
height: 425px;
background-color: #e44d26;
}
#secondpart h3 {
font-size: 20px;
text-align: left;
}
.text {
float: left;
width: 30%;
padding-right: 25px;
text-align: justify;
}
.text a {
text-decoration: none;
color: white;
}
.text1 {
float: left;
width: 30%;
padding-right: 10px;
border-right: 1px solid maroon;
text-decoration: none;
}
.text1 a {
text-decoration: none;
color: white;
}
.text1 p {
text-align: left;
color: white;
}
.text p {
text-align: left;
color: white;
}
.button1 {
padding: 5px;
margin-top: 5px;
border-bottom-color: maroon;
}
#formright {
float: right;
width: 32%;
height: 350px;
padding: 15px 10px 15px 10px;
background-color: #666666;
color: white;
margin-right: -45px;
border-radius: 5%;
border-right: 5%;
}
#entries {
margin-left: 15px;
margin-top: -25px;
}
#entries input[type=name] {
padding: 4px;
height: 25px;
width: 250px;
}
#hr1 {
margin-top: -40px;
}
------- footer {
margin-top: 20px;
}
#socialmedia {
margin-left: 250px;
margin-top: 30px;
}
#socialmedia li {
float: left;
list-style: none;
display: inline;
width: 20%;
padding: 20px 5px 20px 5px;
}
<!------------------------About page--------------------->#aboutsect {
height: 300px;
background-color: yellow;
}
.caja {
margin-top: 20px;
height: 550px;
border-bottom: 1px solid green;
}
#mainimg {
float: left;
width: 35%;
background-color: white;
}
#content {
float: right;
width: 45%;
background-color: white;
}
-------- section h2 {
margin-top: 20px;
margin-bottom: 20px;
}
section .button1 {
margin-top: 20px;
}
.caja2 {
margin-top: 20px;
padding-left: 150px;
margin-bottom: 20px;
}
.person {
float: left;
margin-left: 30px;
width: 30%;
margin-bottom: 40px;
}
section img {
border-radius: 50%;
height: 100px;
width: 100px;
}
section h3 {
font-size: 15px;
margin-left: 10px;
margin-top: 20px;
}
section p.centrado {
font-size: 15px;
margin-left: 5px;
margin-top: 20px;
}
section p {
font-size: 15px;
margin-left: -40px;
margin-top: 20px;
}
------- #clients {
height: 200px;
background-color: yellow;
}
#clients h3 {
margin-top: 60px;
}
#cajaotra {
margin-top: 20px;
height: 200px;
border-bottom: 1px solid green;
margin-left: 150px;
}
.client1 {
margin-top: 30px;
padding: 10px;
margin-right: 70px;
}
------ <!------------------------Service page---------------------!>#services {
height: 300px;
}
#cajafoto {
height: 300px;
border-bottom: 1px solid blue;
}
.equip {
height: 200px;
width: 80%;
margin-left: 100px;
margin-top: 20px;
}
----------------- #fraccion {
height: 400px;
}
#cajaourservices {
margin-top: 50px;
height: 200px;
}
#ourservices {
float: left;
width: 60%;
}
#wantmore {
float: right;
width: 30%;
}
----------------- #serviceimages {
height: 400px;
}
#cajaimagenes {
height: 300px;
margin-top: 30px;
}
.train {
width: 25%;
margin-left: 20px;
padding: 30px;
float: left;
}
<body>
<header>
<div class="container">
<div id="logo">
<a href="http://www.elpais.com">
<img src="bottle2.jpg" title="bottle" height="50" width="50"></a>
<p>Drink Me</p>
</div>
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Our Wines </li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
<section id="aboutsect">
<div class="container">
<div class="caja">
<div id="mainimg">
<img src="circle.jpg" alt="the team">
</div>
<aside id="content">
<h2>Title</h2>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem
Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
<button class="button1" type="submit">Read More</button>
</aside>
</div>
</div>
</section>
<section id="meet">
<div class="container">
<h3>MEET THE TEAM</h3>
<hr>
<div class="caja">
<div class="caja2">
<div class="person">
<img src="rostro.jpg">
<h3>James Keating</h3>
<p class="centrado">Profile Description</p>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
</div>
<div class="person">
<img src="rostro.jpg">
<h3>James Keating</h3>
<p class="centrado">Profile Description</p>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
</div>
<div class="person">
<img src="rostro.jpg">
<h3>James Keating</h3>
<p class="centrado">Profile Description</p>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
</div>
</div>
<br>
<br>
<div class="caja2">
<div class="person">
<img src="rostro.jpg">
<h3>James Keating</h3>
<p class="centrado">Profile Description</p>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
</div>
<div class="person">
<img src="rostro.jpg">
<h3>James Keating</h3>
<p class="centrado">Profile Description</p>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
</div>
<div class="person">
<img src="rostro.jpg">
<h3>James Keating</h3>
<p class="centrado">Profile Description</p>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
</div>
</div>
</div>
</div>
</section>
<section id="clients">
<div class="container">
<h3>OUR CLIENTS</h3>
<div id="cajaotra">
<img class="client1" src="client1.jpg">
<img class="client1" src="client1.jpg">
<img class="client1" src="client1.jpg">
<img class="client1" src="client1.jpg">
<img class="client1" src="client1.jpg">
</div>
</div>
</section>
<footer>
<div class="container">
<ul id="socialmedia">
<li>Facebook<img src="facebook.png" height="24" width="24"></li>
<li><img src="facebook.png" height="24" width="24">Twitter</li>
<li><img src="facebook.png" height="24" width="24">LinkedIn</li>
</ul>
</div>
</footer>
</body>
Remove all ---- lines and <!-- xxx --> lines from your CSS, as these are not valid CSS and may prevent your CSS from being properly applied. CSS comments usually use the C syntax (/* comment */).
I am working in wordpress on a webpage. I have a box made with css where some text is displayed. What is strange is that I have no
Anyone can see what the poblem may be ?
And why is the space so big, it is bigger than the height of a letter.
code:
<style>
.bottom2 {
display: flex;
flex-direction: column;
}
.bottom1 {
width: 70%;
}
.bottom2 {
width: 30%;
}
.publicationright {
width: 250px;
height: 180px;
border-radius: 25px;
padding: 15px;
background: #559BBC;
color: #fff;
margin-left: 5%;
margin-bottom: 10px;
}
.publicationbottom {
width: 250px;
height: 90px;
border-radius: 25px;
padding: 15px;
background: #769DBD;
margin: 0 auto;
margin-bottom: 5%;
margin-top: 5%;
text-align: center;
color: #fff;
font-family: Arial;
padding-top: 0px;
text-decoration: none;
}
.textpub {
color: #365A6B;
font-size: 14px;
}
</style>
<div class="publication">
<div class="bottom2">
<div class="publicationright">
Title!
<div class="textpub">
FamoS – Fahrradverkehrsmodelle
</div>
<p>
<div class="textpub"></div>
Title
<div class="textpub">
Name Surname, Name Surname, Name Surname, Name Surname
</div>
</div>
<div class="publicationright">
Title!
<p>
<div class="textpub">
FamoS – Fahrradverkehrsmodelle
</div>
<p>
<div class="textpub"></div>
Title
<p>
<div class="textpub">
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
</div>
</div>
</div>
</div>
You have to remove the default margin of paragraphs, set by browsers by default;
p { margin: 0; }
EDIT I restructured your html (set correct indents), you'll see you actually open up <p> tags, but don't close them. Either remove them, or close them properly on appropriate places.
EDIT 2 As you're using wordpress, most probably wpautop is messing with you. Try to put this in wp-content/themese/YOUR-THEME/functions.php
function my_theme_init() {
remove_filter('the_content', 'wpautop');
}
add_action('init', 'my_theme_init');
NB: if you're not using a child theme you're doing it wrong. So when I say YOUR-THEME above, of course I mean YOUR-CHILD-THEME
How to align image and content inside div under div. tried with float left but not working
Js fiddle link for quick overview
here is the CSS:
.container {
clear: both;
padding: 0px;
margin: 0px;
overflow:hidden;
}
.profile1 {
background-color: #CCF;
}
.profile2 {
background-color: #CFC;
}
.profile3 {
background-color: #FCC;
}
#media only screen and (min-width: 480px) {
.span_1_of_3 {
width: 32.2%;
}
.col {
display: block;
float: left;
margin: 1% 0 1% 1.6%;
}
.col:first-child {
margin-left: 0;
}
}
HTML:
<div class="container" style="border:2px solid black;">
<div class="col span_1_of_3 profile1"><img src="http://placehold.it/100x100"/>Lorem ipsum dolor sit amet</div>
<div class="col span_1_of_3 profile2"><img src="http://placehold.it/100x100"/>Lorem ipsum dolor sit amet</div>
<div class="col span_1_of_3 profile3"><img src="http://placehold.it/100x100"/>Lorem ipsum dolor sit amet</div>
</div>
Floating image to the left seems to be working just fine: http://jsfiddle.net/rTZJ9/.
.col > img {
float: left;
}
DRD's aswer is good and You may also use align="left" inside img tag.
<img src="http://placehold.it/100x100" align="left"/>
#Sharanpreet The align attribute of is not supported in HTML5. Use CSS instead.