Consider two inline-block divs. Now, I want when the user decrease the browser size, that only one <div> will stay visible (and not one <div> to go to the next line...).
How can I implement that?
<style>
div {
display:inline-block;
}
</style>
<div id="first">this should dissapear on narrowing browser</div>
<div id="second">only this should be visible</div>
I use Polymer, so if there is some syntax sugar here would be nice :)
Try this! http://jsbin.com/bibuzu/1/edit
There's a breakpoint at 480px so any widths before then the first div is set to display none and the second div takes up the rest of the space.
#media screen and (max-width: 480px) {
div.first {
display: none;
}
div.second {
width: 100%;
}
}
Check out media queries. Two possible approaches to this problem:
Set display:none on the div to hide it at a certain screen resolution
Wrap the two divs in another one with overflow:hidden on the wrapper
You probably want to use a media query, e.g.:
Demo Fiddle
#media only screen and (max-width: 640px) { /* <--e.g. hide at 640px.. */
div:first-child{ /* <--selector to identify the div you want to hide */
display:none;
}
}
Related
I'm trying to disable a part of my HTML, this code:
<div class="right">
with Media Queries when it gets to a certain screen size, but I'm not sure how to do it. Any suggestions?
Thanks
If by disable you mean "disappear". Then you can use media queries to make that happen by setting the display property to none. Like this:
/* A bit of color */
.right {
height: 200px;
background-color: crimson;
}
/* Hide the <div> with class "right" when the screen width is 600 pixels or lower */
#media (max-width: 600px) {
.right {
display: none;
}
}
<div class="right"></div>
Tip: Click "Run code snippet", then click "full page" and resize the screen of the browser until it disappears.
Learn more about media queries here.
I am working on a web site.
On min-width: 769px and max width of 1203px I was trying to remove the float for two divs so I can make it a full width option for both divs is:
Since I am using a page builder I tried to use my inspector tool on Chrome and search for appropriate classes or div that can do the trick and I pull the ff codes:
#media (min-width: 769px) and (max-width: 1203px){
.pbuilder_column_inner.pbuilder_droppable{
width: 100%;
display:block;
float: none;
}
}
But for some reason it doesn't do the trick. Am I doing it wrong?
Hi just remove width: 50% in or replace it with 100% instead:
.pbuilder_column.pbuilder_column-1-2{
width: 100%;
}
The following CSS properties:
float:none;
width:100%;
on the divs which classes are pbuilder_column pbuilder_column-1-2 (in the hierarchy, they are right below pbuilder_row_colwrapper ).
So, the code would be:
#media (min-width: 769px) and (max-width: 1203px){
.pbuilder_column{
float:none;
width:100%;
}
}
It does the trick, from my inspector at least.
Just use the class .pbuilder_column instead of .pbuilder_column_inner.pbuilder_droppable.
body,
#pbtheme_wrapper{
overflow-y: visible !important;
}
.pbuilder_column.pbuilder_column-1-2{
width: 100% !important;
}
You have to add below css:
#media screen and (min-width: 769px) and (max-width: 1203px){
.pbuilder_row_colwrapper .pbuilder_column {
float: none;
display: block;
width: 100%;
}
}
To me the real problem comes from the way you add your paddings to your elements. By removing or adjusting a lot of them, I was able to achieve it and increase the responsiveness (try to play around margin more than padding in some situations)
The main thing here, is not that your field aren't taking 100% of the container space, it's your button that overflows the container because of a 170px padding (with a !important, which is something I really don't recommend) so it seems like divs aren't taking the right amount of space.
Here's the page: https://hamzicabdulah.github.io/Raptitude/
The divs with the "other-stories" and "footer" classes overlap when the height of the "other-stories" div is set manually:
.other-stories {
height: 65%;
}
#media screen and (min-width: 768px) {
.other-stories {
height: 89%;
}
}
If I remove the above code, the divs don't overlap. What's the workaround here, considering the manually set height of the "other-stories" div needs to stay there in order to work fine in Firefox?
Set Float to footer and other stories.
.other-stories {
height: 65%;
float:left;
}
#media screen and (min-width: 768px) {
.other-stories {
height: 89%;
float:left;
}
}
It overlaps, because the <div>s in your <div class="other-stories"> are overflowing out of the div itself.
Why do you have a fixed height on other-stories what functionality are you trying to gain? Also, is there a particular reason you are using height %s?
With flex is a little tricky. I suggest to change all, remove flex display and use bootstrap grid. Do you know?
I had a hard time to fix it. Maybe I am just very noob on css.
Basically, I want the icon to visible only in Mobile version of the site.
in above 767px I put this code to make i hidden.
.neighbourhood-img img {display:none;}
My question is, how can I make it visible in below 767px width..
Thanks!
hey check out this css
#media screen and (min-width: 768px) {
.neighbourhood-img img {display:none;}
}
#media screen and (max-width: 767px) {
.neighbourhood-img img {display:block;}
}
What you need is called media queries. Try with:
#media screen and (min-width: 768px) {
.neighbourhood-img img {display:none;}
}
It will be hidden when the width of the screen is at least 768px
You can read more about media queries here:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
You can use media queries available in CSS to define the styles which meet certain conditions, in you case the condition will be screen width.
Use Css Class:
.neighbourhood-img img
{
display:block;
}
I think I understand what you're asking.
If you only want it to visible on mobile version then you could do the following:
Make a new CSS rule:
#media only screen and (max-width: 767px) {
.m-show {
display: block !important;
max-height: none !important;
overflow: visible !important;
}
}
Then wrap your icon in a div tag as below, with the styling to hide it (but make its class the m-show class):
<div style="display: none; max-height: 0; overflow: hidden" class="m-show">
Your hidden content here...
</div>
This will hide it if it isn't in that max width of 767, otherwise it will show it. Hope this makes sense. I would also suggest making that inline styling in the div tag a separate CSS class (just because I don't like inline styling).
I've a question, I'm trying to structure a site so that when it is in desktop mode a particular div which contains an img element is set to display:none;
When the screen size gets to 450px or less I would like to set the div to display:block and show it.
However, I'm having an issue doing so as the display:block never get's applied. I can do the reverese (display:block to display:none) . I'm guessing my issue is that I'm trying to apply a style to an element which does not exist on the page, if that is the case is there a way I can hide it, so that it takes up no space and show it when the screen is less than 450px?
Any help is much appreciated.
This is my CSS
#toplogo{
display: none;
margin-left: auto;
margin-right: auto;
}
This is my Media Query
#media screen and (max-width: 450px){
#toplogo{
display: block;
}
}
This is the HTML
<div id="toplogo">
<img src="/images/myimage.png"/>
</div>
Any help is much appreciated.
Your code seems just fine right now.
But I'd suggest mobile first approach, so the global style is aimed at mobile devices and later altered for bigger screens. Be sure to check what are you altering with your css media queries and check your code order so you are not overwriting media queries with your styling later in the 'global' css code
This snippet below wont work as intended if my media query will be placed at the top of css file, as it will be later overwritten - example of badly organized css media query
Working example
/* mobile first approach */
#toplogo {
display: block;
margin-left: auto;
margin-right: auto;
background-color: blue;
}
.hey {
display: none
}
#media screen and (min-width: 450px){
/* hide block when window width is at least 450px */
#toplogo {
display: none;
}
.hey {
display: block
}
}
<div id="toplogo">
<img src="http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png">
</div>
<div class="hey">Hey, I'm bigger than 450px!</div>
http://jsfiddle.net/gfuunyak/4/
No need to apply any js.
Your css & media query are perfectly written; It works in my end; if not work in your end; then just add !important after display: block;