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; }
Related
I need to change the container padding. Particularly the width. I tried to find the code in style.css and found this code.
.center{ width:85%; margin:0 auto;}
I adjusted the width to 100% but it took the logo and the menu bar to the left side with itself.
I am searching for the solution to this. Also I want to apply this css code to only one page.
If you're changing the width, you're going to change how that element interacts with other elements, so changing the width is a bad idea.
You should stick to just changing the padding.
.center {
width: 85%;
margin: 0 auto;
padding: 10px; //insert whatever padding you want here
}
If this is affecting the width of the element, then try applying:
.center {
//your existing css for this selector, then:
box-sizing: border-box;
}
If you want to apply this change to one page only, your best bet is probably to add a class to the html element that you're trying to modify and target that class with your new padding.
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.
I'm trying to have the text in my Jumbotron (Bootstrap 3) all the way to the left.
I tried padding and align but nothing seems to work: there's always a distance between the left-beginning of the Jumbotron background and the text.
I tried adding to a custom css file:
.jumbotron {
padding-left: 0px;
padding-top: 3px;
padding-bottom: 3px;
}
Top and bottom work. Left doesn't.
It is because of Bootstrap css style:
.container .jumbotron {
padding-left: 60px;
}
Try to override it.
You are falling prey to CSS specificity based on descendant combinators. Basically .container .jumbotron{...} carries more weight than .jumbotron{...} alone, so easiest thing is to override it with
.container .jumbotron {
padding:0px 3px;
}
However, there are a number of descendant combinators within jumbotron, (h1-6, .h1-6, p, etc) you have to watch out for... To see this in action, throw an h1 at the top of the jumbotron and pull your hair out trying to customize padding for that!
Example Bootply
Instead of overriding the CSS for the jumbotron, why not just add your own class to the element and style it the way you like with your own CSS? i.e. Don't use Bootstrap's jumbotron class at all - just style it "from scratch".
I have a requirement, where i need to write CSS based on control current width.
Example: Let say i have DIV, If i place this div in side menu bar(say, menu width="300px;"), i want to set font size 8px and if i place this DIV in main content area(say, menu width="700px;"), I want to set font size 15px.
How to acheive this scenerio using CSS ?
I know, we can write something like this with media query, but media query is based on viewport width, not parent container width.
Take advantage of the C̀²ascading part of CSS:
.menuBar .myDiv
{
font-size: 8px;
}
.mainContent .myDiv
{
font-size: 15px;
}
.side-menu div{
font-size:8px;}
.main-content div{ font-size:15px;}
UPDATE: I have tried the suggestions below, but I'm still facing the same problem. I've edited the code below to reflect the new stylesheet. If it helps, the page in question is http://japanesenostalgiccar.com/2011/05/06/friday-video-nissan-cedrics-vs-s30-fairlady-z/
In my wordpress blog I'm trying to create a stylesheet where an image or embedded youtube video is 640px wide, while the text beneath it is only 600px wide.
The wordpress-generated HTML looks like this:
<div class="entry-content">
<p>
<a href="uploads/2011/05/ball.jpg">
<img class="alignnone size-large wp-image-15139" width="640" height="211"
src="uploads/2011/05/ball.jpg" title="Ball" />
</a>
This is a baseball.
</p>
</div>
My external CSS file has the following:
.entry-content p{
overflow: visible !important;
padding : 0px 20px 0px 20px;
}
.entry-content p .alignnone, iframe{
overflow: visible !important;
width : 640px !important;
padding : 0px !important;
}
img.alignnone.size-large{
overflow: visible !important;
width: 640px !important;
padding : 0px !important;
}
However, the image (and the text) always displays at 600px, while the embedded youtube videos (using the iframe tag) display at 640px.
Thinking it was a specificity issue, I even added
style="width: 640px;"
as an IMG attribute, but no dice. Thanks in advance.
Based on your updates, I looked at the page in question. I think I might have an answer for you.
Check out the styles that your theme "TwentyTen" is inserting starting at line 778:
/*
Resize images to fit the main content area.
- Applies only to images uploaded via WordPress by targeting size-* classes.
- Other images will be left alone. Use "size-auto" class to apply to other images.
*/
img.size-auto,
img.size-full,
img.size-large,
img.size-medium,
.attachment img {
max-width: 100%; /* When images are too wide for containing element, force them to fit. */
height: auto; /* Override height to match resized width for correct aspect ratio. */
}
The 'max-width: 100%;' line seems to be the issue. Using Firebug, I just turned that style off for a second and the picture of the Nissan snapped out to be full-width. So to solve it, you should be able to add this to your own stylesheet:
max-width: none;
I hope this helps!!
You have another class on the image of "size-large" - did you check to see what that style is doing to the image? Does that style possibly have a "!important" declaration in it?
I don't know what the other classes on your img are doing, but maybe you could try something like this:
img.alignnone.size-large {width: 640px !important;}
simple:
.entry-content p .alignnone, iframe{
width : 640px;
}
this will take the child element of p, and set it at 640px;
However, you might need to set the
.entry-content p{
overflow-x:visible
}
The image is only 600px wide because of the padding on the paragraph tag.
If you want to display the image and the iframe at 640px, you can add the following:
to the image:
img {
margin: 0 -20px;
display: block;
}
to the iframe:
iframe {
margin: 0 -20px;
}
Did you try separating the div's i.e. tags for the text beneath & that contains the image/video ?
Keep the container that holds (iframe & text) consistent.
Separating the divs for inner elements of the container is a better option.