On http://www.devinkbb.nl I want the bottom right column to align with the pictures on the left. For some reason it adds a min-height: 200px; to the column, so that it sticks out. The pictures have a height of 180px.
I have tried to give the column a class, #ddd. The max height is set to 180px in css but this doesn't do anything. Any ideas?
Set min-height:180px for the class .fusion-column-last .fusion-column-wrapper, It is working fine in browser.
See the image for reference.
It's happening because image wrapped into <p> and <p> has margin-bottom: 20px
There are 2 things you can do.
1st Solution:
Add class in: <p class="mb0">
Add new css rule
.post-content p.mb0 {
margin-bottom: 0px
}
2nd Solution:
Remove <p> that wrapped over <img>
Set min-height:0; to .fusion-column-wrapper
It will look like
.fusion-column-last .fusion-column-wrapper{
min-height:0;
}
I have included .fusion-column-last to avoid the style getting applied to other divs with class .fusion-column-wrapper. If it is still getting overridden, add !important after min-height:0
Answer:
margin-bottom: 20px; change into margin-bottom: 10px;
Answer:
First two <p></p> tag use margin-bottom: 20px; and last tag use margin-bottom: 0px;
Use it. It should work.
Related
On this site http://exact-mats.myshopify.com/ we want the height of the white space above the logo to equal the height of the whitespace below it.
I can't find the CSS rule to make this happen.
I can see we need to target something in
<nav class="top-menu">
....
<div class="row">
What am I missing? What CSS do I change?
Thanks.
add
padding-bottom: 0;
for the row below the div
<div class="free-shipping">Free shipping on all orders</div>
it did work when i inspected and added padding-bottom: 0;
Remove margin bottom from label and select inside <div class="car-search"></div>
.car-search label, .car-search select {margin-bottom: 0}
Set a height to the parent div of ".large-menu-container" which is ".row" or just add another parent to it if you don't want to modify the ".row".
I set the height to 75px and it works.
When you use "height: 100%;" on an element, its parent must have a predefined height in order to work.
Then you will have to adjust the select tags with a margin/padding top
Snapshot of new CSS
Add margin-bottom: -30px; In
.top-menu .row {
max-width: 82.5rem; }
Of your exact-mats.myshopify.com css
If you are unable to change css because of using third party CSS then
add new CSS class in
1. Every page where you are showing your Logo
2. OR if you can, add this class to custom .css file.
.top-menu .row {
margin-bottom: -30px; !important }
Note: I would rather suggest increasing the height of white space above top nav so it will look better than reducing space below it.
To do above thing.
Either add following CSS.
.top-menu .row {
padding-top: 31px !important; }
I am working on the following website http://bestofdesigns.be/studioregenbogen/index.html.
Can somebody please look at the css and tell me why the footer is not attached to the content and why there is a gap between the menu and the contentwrapper?
I have looked at this for 2 days and cannot seem to find what goes wrong.
Thanks,
Ben
#footer p {
padding-top: 5px;
margin: 0;
}
why there is a gap between the menu and the contentwrapper?
The gap is due to the margin applied by default by each browser to the list <ul> element and the title <h1>.
Remove it or adjust it
Screenshot
hi now give to #footer overflow:hidden and give to your footer p tagmargin :0;`
as like this
#footer{
overflow:hidden;
}
#footer p{
margin:0;
}
I am suggesting one more thing did you ever opened your design using firebug and checked how your middle content looks. It's bad design. Use div tags extensively don't use padding much.In the body style put text-align:justify property.
Your error is in
#footer p {
padding-top: 5px;
margin: 0;
}
Divide the content wrapper class into two vertical div classes and then divide the below vertical classes into another two vertical classes. Divide the first vertical tag into two horizontal div classes. In that put your image in first horizontal tag and in second your paragraph. In the bottom vertical class your second paragraph.
I've been searching around for a while (for the answer) with no success, so I guess I did "my homework"...
So basically I've a gap between 2 divs.
You can see it here.
on your content class
.content {
background: url("panel.png");
padding: 0;
margin: 0;
float: left; /*new style*/
width: 100%; /*new style*/
}
Give overflow:hidden to your .bigtext, like this:
.bigtext{
overflow:hidden;
}
This problem is called "collapsing margins".
Check this http://reference.sitepoint.com/css/collapsingmargins
http://www.w3.org/TR/CSS2/box.html
The gap is caused by the p element.
You need to take the margins off - browsers default behaviour is to add 1em before and after the paragraph.
If you use google chrome, you can right click and goto inspect element. From there you can see what default behaviours have been applied to certain elements on the page. You can even see visually what space has been created by margins. Your gap was one of them. =)
See screenshot below - this is showing the margin applied to another p element.
Try margin: 0; for those divs.
you can hack it by applying margin-top:-23px to the .content div
I have an inline element with a line break in it. It has padding on all sides. However, the side padding on where the line break cuts the element is not there.
This is what i mean:
http://jsfiddle.net/4Gs2E/
There should be 20px padding on the right of tag and left of with but there isnt.
The only other way I can see this working is if i create a new element for every line but this content will be dynamically generated and will not be in a fixed width container so i dont see that working out. Is there any other way I can do this in css without any javascript?
I want the final result to look like this :
http://jsfiddle.net/GNsw3/
but without any extra elements
i also need this to work with display inline only as I want the background to wrap around the text as inline block doesnt do this
Is this possible?
edit, altered the examples to make what i want more visible:
current
http://jsfiddle.net/4Gs2E/2/
what i want it to look like
http://jsfiddle.net/GNsw3/1/
In some cases you can use box-shadow for a workaround.
Move the right and left padding of the element to its parent and add two box-shadows.
The result: http://jsfiddle.net/FpLCt/1/
Browser support for box-shadow: http://caniuse.com/css-boxshadow
Update:
There is also a new css property for this issue called box-decoration-break. It is currently only supported by opera, but hopefully more browsers will implement this soon.
Hope this helps
Found a solution for you, but it ain't pretty :)
Since you can't target the <br> element with css, you have to use javascript. Here's how you can accomplish what you want with jQuery:
// Add two spaces before and after any <br /> tag
$('br').replaceWith(' <br /> ');
Play with the number of elements to acheive your padding on both ends.
Here's an updated Fiddle demo:
http://jsfiddle.net/4Gs2E/8/
Maybe you can use float: left instead of display: inline:
http://jsfiddle.net/GolezTrol/4Gs2E/1/
Usually that is implemented by wrapping each word in an own SPAN which has border.
I just wanted to make css-animated menu for myself. Workaround I have found is to wrap your INLINE-BLOCK element (change in css if necessary, lets call it a span with such an attribute for purpose of this solution) into block element. Then I'm using margins of span as it was padding for the surrounding div.
div.menuopt {
margin: 10px;
padding: 0px;
padding-left: 0px;
overflow: hidden;
width: 500px;
height: 150px;
background: grey;
}
span.menuopt {
display: inline-block;
margin: 0px;
padding: 0px;
margin-left: 150px;
margin-top: 10px;
font-size: 25px;
}
Example:
http://jsfiddle.net/ApbQS/
hope it will help anyone
I have tried using firebug to locate the problem, but cannot find the solution to the following at this url :
How to get rid of the space between the image and the text? For example, the gap between the image of lego-like bags and the text "AboveHere Concept"
How to align these two social buttons in one line? I have set the twitternews class width to 90px and the facebooknews iframe to a width of 90px, but this does not work. I also have these two buttons in a block with a width set to 200px, but this does not seem to work either.
your
<p>
tags in the post-body divs have a top and bottom margin of 1em. that's why there's a lot of space in there. take those out
.post-body p {
margin: 0;
}
you need to set .facebooknews div to have a smaller width, not the iframe
div.grid-item .facebooknews {
clear: none;
float: left;
padding-right: 5px;
width: 100px;
}
1) Add the style margin-top: 0px to the P tag that the "AboveHere Concept" text is in. Also remove the <br> thats right before the text. It will move everything up.
2) facebooknews add a width: 100px; and it will fit.