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
Related
Tried this in every major browser (Chrome/Safari/IE/Edge) and Firefox. Works in everything but Firefox where the text gets nudged down.
.auto-height {
display: table;
height: 100%;
}
.full-height-section {
display: table-cell;
height: 100%;
width: 49%;
background-image: url("https://preview.ibb.co/iNcv0f/ladysquats.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.half-content {
width: 100%;
height: 100%;
vertical-align: top;
padding: 60px 30px;
}
.half-content h2, .half-content p, .half-content ul {
text-align: center;
}
.half-content .img-size-payment-type {
width: 65%;
}
button.colour-dark-pnk, button.colour-light {
font-size: 1em;
margin-top: 25px;
padding: 10px 60px;
border: 0 solid #f4a2a4;
border-radius: 0;
cursor: pointer;
}
}
<div class="how-works-section-six-container auto-height mobile-screen-hide">
<div class="full-height-section">
</div>
<div class="section-six half-content">
<h2>IPSUM LOREM</h2>
<p> <img class="img-size-payment-type" src="https://preview.ibb.co/f0Ea0f/metodos-pago.png"><br>
<button class="colour-dark-pnk">Order now</button></p>
<h2 class="font-colour-dark-pnk">Test Title</h2>
<p>Ipsum Lorem Ipsum Lorem:</p>
<ul class="box-pnk">
<li>Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem.</li>
<li>Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem.</li>
</ul>
</div>
</div>
What it looks like in FF:
What's even weirder is that the problem disappears as soon 'Inspect Element' is used, meaning it's very hard to see what's going on. Looks like an actual Browser bug?
http://jsfiddle.net/c3bfzLhj/
Change all height:100% to min-height:100%
This is a Firefox bug. I had faced this problem two weeks ago while working on my web app.
I want to get rid of the whitespace between the 'subscribe to our newsletter' section and the 'Affordable Professional Web Design' section.
I have already tried to set the margin to 0 for the bottom of the 'Affordable Professional Web Design' section and also the top margin for the 'subscribe to our newsletter' section but that doesn't seem to work.
This is how it looks like in a browser:
This is my HTML and CSS file:
.webdesignbannerdiv {
min-height: 400px;
background: blue;
padding-top: 20px;
text-align: center;
color: white;
margin-bottom: 0px;
}
.webdesignheader {
margin-top: 100px;
font-size: 55px;
}
.webdesignparagraph {
font-size: 20px;
margin-top: 5px;
}
/*newsletter section*/
.newsletterdiv {
margin-top: 0px;
padding: 15px;
color: white;
background-color: #35424a;
}
<section id="affordablewebdesignbanner">
<div class="webdesignbannerdiv">
<h1 class="webdesignheader">Affordable Professional Web Design</h1>
<p class="webdesignparagraph">Lorem ipsum dolor sit amet, consectetur </p>
</div>
</section>
<section id=subscribetonewsletter>
<div class="newsletterdiv">
<h1>Subscribe to our newsletter</h1>
<form>
<input type="email" placeholder="Enter Email...">
<button type="submit" class="newsletterbutton">Subscribe</button>
</form>
</div>
</section>
This is how i want it to look like:
You are facing a complex margin-collapsing as the p element has a default margin-bottom that is rendred outside of the section even if this one is having a min-height set. You may notice that this won't happen in all the browsers (on Firefox you won't see this gap).
To fix this, simply remove that margin:
.webdesignbannerdiv {
min-height: 400px;
background: blue;
padding-top: 20px;
text-align: center;
color: white;
margin-bottom: 0px;
}
.webdesignheader {
margin-top: 100px;
font-size: 55px;
}
.webdesignparagraph {
font-size: 20px;
margin-top: 5px;
margin-bottom:0;
}
/*newsletter section*/
.newsletterdiv {
margin-top: 0px;
padding: 15px;
color: white;
background-color: #35424a;
}
<section id="affordablewebdesignbanner">
<div class="webdesignbannerdiv">
<h1 class="webdesignheader">Affordable Professional Web Design</h1>
<p class="webdesignparagraph">Lorem ipsum dolor sit amet, consectetur </p>
</div>
</section>
<section id=subscribetonewsletter>
<div class="newsletterdiv">
<h1>Subscribe to our newsletter</h1>
<form>
<input type="email" placeholder="Enter Email...">
<button type="submit" class="newsletterbutton">Subscribe</button>
</form>
</div>
</section>
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 */).
In this fiddle , the parent <p> tag contains an <img> tag which is floated left float: left however the parent <p> tag does not expand to fully encompass the floated img element although I have clear:both set on parent <p> tag.
I know that adding an extra div with clear:both before closing </p> or overflow:auto on <p> will do the job but I am at wits end as to why clear:both set on <p> tag does not work as I expect.
Can anybody explain this behavior?
.thumbnail-desc h2 {
display: inline-block;
background: blue;
color: #fff;
padding: 5px 7px;
margin-bottom: 0;
}
.thumbnail-desc img {
float: left;
width: 200px;
max-height: 200px;
margin-left: initial;
margin-right: 10px;
margin-bottom: 10px;
border: 1px solid #ddd;
overflow: hidden;
}
.thumbnail-desc p {
background-color: #fff;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.01);
padding: 15px;
font-size: 18px;
clear: both;
margin-bottom: 20px;
margin-top: 0;
}
<div class="thumbnail-desc">
<h2>Some title</h2>
<p>
<img src="http://i.huffpost.com/gen/1632280/images/n-VISION-200x150.jpg" alt="Our Vision">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi nihil dignissimos. Some crazy text.Some crazy text</p>
</div>
It seems you may misunderstand how clear works.
Setting clear:both on the <p> tag is telling the p to clear anything that comes before it - not the child items within it.
You can add overflow: hidden; for <p>. Here is example: https://jsfiddle.net/hnL0gLy2/
Instead of covering the image with a p tag, use a class and a div.
Fiddle.
HTML:
<div class="thumbnail-desc">
<h2>Some title</h2>
<div class="outer">
<img src="http://i.huffpost.com/gen/1632280/images/n-VISION-200x150.jpg" alt="Our Vision">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi nihil dignissimos. Some crazy text.Some crazy text
</div>
</div>
CSS:
.thumbnail-desc h2 { display: inline-block;
background: blue;
color: #fff;
padding: 5px 7px;
margin-bottom: 0; }
.thumbnail-desc img {
float: left;
width: 200px;
max-height: 200px;
margin-left: initial;
margin-right: 10px;
margin-bottom: 10px;
border: 1px solid #ddd;
overflow: hidden; }
.thumbnail-desc .outer {
background-color: #fff;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.01);
padding: 15px;
font-size: 18px;
height:150px;
}
Why your code does not work as you thought?
Because the p tag is for the text. It's height is as much as the text inside the div. For more height, you need to switch to a div or span.
You need to set your .thumbnail-desc p to the display of inline-block.
I am having trouble creating a scalable div that increases/decreases in size based on the size of the text in the chat bubble. A good example is the chat bubble that messenger or facebook chat uses.
.left-chat-bubble{
background-color:gray;
padding:10px;
border-radius:40px;
max-width:300px;
}
<div class="left-chat-bubble-wrap">
<div class="left-chat-bubble">
<p>hello</p>
</div>
</div>
I can get it to the its maximum size but I cant get the bubble to wrap around the relative size of the text.
All you need is display to be set inline or inline-block. See this.
.left-chat-bubble{
display: inline-block;
background-color:gray;
padding:10px;
border-radius:40px;
max-width:300px;
}
<div class="left-chat-bubble-wrap">
<div class="left-chat-bubble">
<p>hello</p>
</div>
</div>
For a better chat-like layout you can go for this snippet:
Update
adding arrows will also useful for a better UI.
.msg-list {
width: 100%;
}
.messenger-container {
padding: 8px 15px 8px 13px;
margin: 0 0 25px 35px;
float: left;
max-width: 82%;
background: #f2f2f2;
border-radius: 10px;
min-width: 20%;
position: relative; box-sizing: border-box;
box-shadow: 7px 10px 6px -5px #BBC0C7;
}
.messenger-container p {
color: #3D3D3D;
font-size: 12px;
margin-bottom: 6px;
line-height: 18px;
word-wrap: break-word; margin: 0;
}
.sender .messenger-container {
float: right;
margin-right: 35px;
width: auto;
background: #D5DBFF;
margin-left: 0px;
padding: 8px 15px 8px 13px;
}
.clear {
clear:both;
width: 100%;
padding: 0px !important;
margin: 0px;
height:0px;
}
.messenger-container::before {
width: 0px;
height: 0px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right:15px solid #f2f2f2;
content: "";
position: absolute;
top: 9px;
left: -15px;
}
.sender .messenger-container::before {
width: 0px;
height: 0px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 15px solid #D5DBFF;
content: "";
position: absolute;
top: 9px;
left: 99%;border-right: none;
}
<div class="msg-list">
<div class="messenger-container">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
</div>
</div>
<div class="clear"></div>
<div class="msg-list sender">
<div class="messenger-container">
<p>Lorem Ipsum</p>
</div>
</div>
<div class="clear"></div>
<div class="msg-list">
<div class="messenger-container">
<p>Lorem Ipsum is simply dummy text</p>
</div>
</div>
<div class="clear"></div>
<div class="msg-list sender">
<div class="messenger-container">
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
</div>
</div>
<div class="clear"></div>
Or you can use either display:inline-block or float:left and clear:both if you want them on top of each other.
.left-chat-bubble{
clear:both;
float:left;
background-color:gray;
padding:10px;
border-radius:40px;
max-width:300px;
}
<div class="left-chat-bubble-wrap">
<div class="left-chat-bubble">
<p>hello, this is a chat bubble</p>
</div>
<div class="left-chat-bubble">
<p>hello, this is a chat bubble with text that wraps onto multiple lines</p>
</div>
</div>
.left-chat-bubble{
background-color:gray;
padding:10px;
border-radius:40px;
display:table-cell;
}
<div class="left-chat-bubble-wrap">
<div class="left-chat-bubble">
<p>hello with more text</p>
</div>
</div>