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;}
Related
<body>
<div>
</div>
</body>
div {
width:10vw;
height:10vh;
}
Is there any way to set this div that will be 10% of the full available window ? (When the window browser cover all the screen).
Last time I did it with script in JS but I believe nobody does this and only use css.
Instead I can use px but even with media queries I won't know how it will looks like in other screens.
Anoher option: Using max/min-height/width, but still I don't know what value I need to set from avoiding from the div shrinking (every screen is different px) or just let the div shink to some point - but either at this way I don't know how it will look on other screens.
Thanks.
By specifying the min-height and max-width, you'll be able to control its size.
div {
max-width: 10vw;
min-height: 10vh;
}
Empty div elements have a height of 0 by default so the min-height keeps it from shrinking to nothing.
div elements are also display: block; by default, which means the width is 100% of the containing element. Defining the max-width will restrict that dimension of the div.
You should use max-height/min-height/width in percentages.
div {
width:10%;
max-height:10%;
min-height:10%;
position: fixed;
border:1px solid blue;
}
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 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; }
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.
I have many parent containers. There are many instances of this on a page.
They have different heights.
This is the hierarchy of DIVs:
.parent_container
|-----> .title
|-----> .content
.parent_container has a fix height and .title takes up some of the height
I want .content to take up the rest of the height, but not occupied by .title.
How would I go about doing this?
Currently I have this, but because the parent containers are different heights, the 90% doesn't always work well because the .title is always a certain height specified by a H2 style.
Is there a way in CSS to say "content height = parent_height - title height"?
/*just an example...different parent_containers have diff heights)*/
.parent_container{
height:530px;
}
.content {
height:90%; /* to make room for title */
overflow:auto; /*show scrollbars*/
}
There is a way, in this case, to make it work, but you'll have to adjust HTML and CSS.
The HTML change:
.parent_container
|-----> .content
|-----> .title
|-----> .scroll_container
The title goes inside the content. You may need to override some styles in .title if .content affects them.
Then, set height of .content to 100%. Now you may have to adjust the CSS on .title and .content to make it work, depending on styling, but it should be doable. Put overflow: auto on .content_scroller and you'll want to remove this same style from the .content container. .content_scroller can then scroll content as needed, and the .content container can be 100% of the height of the .parent_container.
there is no current way of calculating with css, although calc() is on the works. there is a big argument saying that doing calculations in css is s parfomance nightmare though. but that's off topic.
one quick fix would be to put .title inside .content, and giving the content a 100% height. saving you the need to calculate anything.
option two is to calculate this using javascript.