I have this html and css code:
<div class="wrapper">
<div class="a"></div>
<div class="b"></div>
</div>
#media all and (max-width: 400px), (max-height: 300px) {
.wrapper .a {
....
....
}
wrapper. .b {
....
....
}
....
....
}
Now I want that whenever wrapper gets the class "like-small", all the styles of small screen will apply even if the screen is not small. I don't want to duplicate the css code inside the media query. How can I solve that?
Another solution is to force media query to apply. Is there any way to do it?
You can try with javascript. This sentence sets the viewport width and forces browser to apply your media query:
$('meta[name="viewport"]').prop('content', 'width=400');
This is taken from this answer:
https://stackoverflow.com/a/20137580/1401341
As someone says in the comments, this will work only with browsers which support viewport tag.
You can do something like this with a bit of javascript.
In a nutshell, you'll move your media queries out of the css, and test them in JS using window.matchMedia.
When you know which one matched, you can add a className to the <html> tag, similar to the way Modernizr works. So on a phone you'd see <html class="like-small">.
Your css will be written to take advantage of those convenience classes, rather than using the native media query:
.like-small wrapper.a {}
.like-large wrapper.a {}
(I also like to add .not-like-small, .not-like-medium classes to <html> as well, to further simplify the css)
So now, after the regular media query is matched and the appropriate classname is appended to the document, RWD works pretty much as normal. And if you want to force a particular style you can just rewrite the classNames on the HTML tag to affect the entire page, or add a className to any parent element to affect only part of the page.
In newer versions of Chrome you can "emulate" a mobile device in order to trigger / test your media queries in a desktop browser. (Internet Exploder 11 has the same behavior!) You may have to refresh the browser after applying the emulation; Chrome 35 still partially applies the media queries until I hit refresh in the associated tab.
I know this question is old, but hopefully this is what you were looking for (as there wasn't an answer). And I also don't know if adding a specificity class to your CSS broke your requirement not to repeat CSS.
You can achieve what you want to do by changing the definition of your #media query. Basically, instead of saying you want something to happen when the screen gets smaller than a value, keep your small screen CSS OUT of the media query and have your media queries set up for larger screens.
Then, you just need to change the order that you call the CSS and add specificity to the styles where you want to call the class like-small.
HTML:
<div class="wrapper like-small">
<div class="a"></div>
<div class="b"></div>
</div>
<div class="wrapper">
<div class="a"></div>
<div class="b"></div>
</div>
CSS:
.wrapper.like-small .a,
.wrapper .a {
height:200px;
width:200px;
background:purple;
}
.wrapper.like-small .b,
.wrapper .b {
height:200px;
width:200px;
background:blue;
}
#media all and (min-width: 400px), (min-height: 300px) {
.wrapper .a {
height:100px;
width:100px;
background:yellow;
}
.wrapper .b {
height:100px;
width:100px;
background:red;
}
}
And the fiddle: http://jsfiddle.net/disinfor/70n37hhj/
Hopefully this is what you were after (over a year and a half ago :)
Add the same class for those sections.
<div class="wrapper">
<div class="makeMeShine a"></div>
<div class="makeMeShine b"></div>
</div>
Where a and b can have their own custom styles :)
Related
I have a site at www. structuredata. com
when the site is on a desktop it looks great. However when it starts to get narrow, the red 'register' button starts to overlap the menu,
I'd like to make a media query in my css that will force the button to drop down below the navigation when viewed on smaller screens. How would I do that?
the header is setup as
<div id="header_main">
<div class="container">
<div class="inner-container">
<strong class="logo"></strong>
<nav class="main_menu"></nav>
<div id="text-8" class="widget"> BUTTON IS HERE </div>
</div>
</div>
</div>
I tried setting my .header_main.widget
to a display:block and inline-block but neither worked. I tried clear:both on it as well.
Media queries can be tricky, you can read a lot about them here(w3c) and here(mdn)
In your case the media query will look something like so:
#media screen and (max-width:320px) {
#header_main .container .inner-container .widget {
/*Styles go here*/
}
}
Hope this helps!
Your navigation bar and your button are on a different z-index, so that's going to be tricky. That's also why clear did not work.
You could set up a media query to adjust the top position of the button (being that it is relatively positioned), like so:
#media screen and (max-width: 700px) /*Or whenever the button overlaps*/ {
#header .widget .avia-button-wrap {
top: 50px !important;
}
}
But then you'll probably have to adjust some other elements in your header to make everything look okay. But this should get you started!
I have a page, when i am looking this page on a laptop screen the two divs are rendering properly but when i am looking this page on mobile screen these two divs are overlapping above each other. I want to remove this overlapping of these divs and want to read first div then second div.
How to do that ?
#media only screen and (max-width:768px){
.vc_row-fluid.lighter-overlay,
.vc_row-fluid.darker-overlay{
display:inline-block; /* Change this to inline-block instead of block */
}
}
but this is creating issue for header,solve that accordingly
check out with Bootstrap. it provides with responsive CSS. you have to include the div class that you require.
example: if you have two divs, put them into one main div and then call each div with separate div class. like
<div class="col-sm-12">
<div class="col-sm-6">
// your code for first div
</div>
<div class="col-sm-6">
//your code for second div
</div>
</div>
try like this. it may help you.
I hope i understand your question because its not really clear(No code provided)
But what i think you need to do is the following:
<!-- Probably your html part -->
<div class = "wrapper">
<div class = "container">
<!-- Some content-->
</div>
<div class = "container">
<!-- Some content-->
</div>
</div>
Here comes the css magic.....
.wrapper{
display:block;
}
.container{
display: inline-block;
}
#media only screen and (max-width:768px){
.container{
width:100%;
}
}
#media only screen and (min-width:768px){
.container{
width:50%;
}
}
By using media querys you can easily fix this kind of stuff
You added as a comment to your question that a demo URL was http://voyagecontrol.com/canarywharf
Origin of the problem: #venue_draft has inline styles including height: 900px.
Solution: it should be removed (elements should adapt automatically to more or less content. Not fixing height is a good start for that) or, if other problems occur, replaced by min-height: 900px
I'm setting up an off-the-shelf shopping cart with a responsive design template. I have a section that is horizontally oriented with larger viewports and vertically oriented with smaller devices. I want to use copy that says "see to the right for [whatever]"... but on a smaller device, it isn't "to the right" but rather underneath. So I'd like to make it dynamically say "see below" when the viewport changes.
Possible? And simple? I don't want a mess of code that myself or other furture admin are going to have to adjust if they want to reword it. But if it can be done with a simple or whatever with all the code contained in css then that's fine.
Otherwise I'll accept "no" if that's the better answer.
You can do this using media query and the following approach.
Declare two spans having the desired data, one for large screens and other for smaller ones:
<span class="lg-view">See to the right</span>
<span class="sm-view">See below</span>
In css, display the lg-view span by default and hide the other one:
.lg-view{
display:inline-block;
}
.sm-view{
display:none;
}
Then inside media query, reverse the above styles:
#media screen and (max-width: 500px) {
.lg-view{
display:none;
}
.sm-view{
display:inline-block;
}
}
One way would be to use pseudo elements and media queries. You could do something like this:
HTML:
<div><!-- empty by design --></div>
CSS:
#media screen and (max-width: 300px) {
div:before {
content: "see below for [whatever]";
}
}
#media screen and (min-width: 301px) {
div:before {
content: "see to the right for [whatever]";
}
}
Obviously this is just a bare bones markup, but with a bit of tweaking it should do exactly what you want.
On Bootstrap 4, you could use the display property to easily manage this without writing media queries.
Sample below:
<div class="d-lg-none">hide on screens wider than lg</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>
More information here: https://getbootstrap.com/docs/4.0/utilities/display/
My question is very very simple.(I am a beginner in the css/html/javascript)
I would like to hide a div in mobile browser and show that div in the other devices (PC&Laptop).
how can I do?
Take a look at the responsive utilities documentation of Bootstrap at http://getbootstrap.com/css/#responsive-utilities.
In this specific case you could for example use the class visible-xs-block to make a <div> only visible on the xs breakpoint that's used for mobile phones, and the class hidden-xs to make a <div> visible on all other breakpoints.
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="visible-xs-block">only visible on xs</div>
<div class="hidden-xs">visible on everything but xs</div>
You can use media queries. For example you could use:
<style>
#media (max-width: 600px) {
.my-div {
display: none;
}
}
</style>
More information here: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
Is there a common CSS layout technique for controlling the vertical source order of a page?
For example, can I change this...
<container>
<header></header>
<content></content>
<footer></footer>
</container>
...to this...
<container>
<content></content>
<header></header>
<footer></footer>
</container>
...while still having the <header> appear at the top of the page, above the <content>?
In other words, I'd like to apply the techniques used for controlling horizontal source order, such as "One True Layout" and "Holy Grail", to the vertical source order of the page.
This question asks essentially the same thing, but the responders didn't seem to get what was being asked and the asker's solution seems cumbersome.
I might get criticism for micro-optimizing, but Mega Menus and responsive design keep pushing my page content down further and further.
Littlefool's answer works well if you know the height of the block you are moving (if you are swapping two blocks, it's sufficient for either of them to have a fixed height).
However it doesn't help if the blocks all have flexible height. In that case you can try the technique from http://tanalin.com/en/articles/css-block-order/:
<div class="container">
<div class="block-1">1st block</div>
<div class="block-2">2nd block</div>
<div class="block-3">3rd block</div>
</div>
<style>
.container { display: table; width: 100%; }
.block-1 { display: table-footer-group; } /* Will display at the bottom. */
.block-2 { display: table-row-group; } /* Will display in the middle. */
.block-3 { display: table-header-group; } /* Will display at the top. */
</style>
(see demo: http://jsbin.com/etujad/11/edit)
Caveats:
It only works for up to 3 blocks (you may be able to achieve more by nesting).
It doesn't work in IE6/7, and there are some wrinkles in IE8.
Many browsers (except Firefox?) don't allow replaced elements like images to be given these display values (testcase), so you'd have to wrap them in a div and reorder the div instead.
You could either supplement this with JavaScript for old IE, or depending on the design it might be acceptable to just leave the blocks in the wrong order in old IE (note that very few smartphones run old versions of IE, as even Windows Phone 7.5 runs IE9, so this is a good option if you're only swapping the source order on mobile devices).
You cannot alter the source of a page with CSS. You can, to some mild degree, alter the HTML output, but not in this way.
The order of elements in an HTML document has meaning. So typically it won't make sense for your source to have a heading which comes after its related content. It is the order which defines that relationship in many cases.
What you can do is use CSS techniques to lay out these elements visually so that they appear to be in different order.
But their vertical order in HTML should be semantically logical.
You should know that searching for "the holy grail" is quite useless. Although I can understand why you want to have the content section in front. Usually search engines index the pages on the content as they appear in html. Having first a bunch of headers and other things won't do any good.
I haven't had time to look into HTML5 and CSS3 yet, but it is quite possible to alter your layout with only css. I'm a developer so my css and html skills are less then real web producer but you can play around with the position properties in CSS.
<div id="content">this is your content</div>
<div id="header">this is the header</div>
<div id="footer">this is your footer</div>
This html can still show the header tag on top of your page with the following css.
#header
{
height:100px;
width:100%;
background-color:Red;
position:absolute;
top:0;
}
#content
{
margin-top:100px;
height:500px;
background-color:Green;
}
#footer
{
height:100px;
background-color:Blue;
}
I hope it gives you an idea of what is possible. (since you mention HTML5 I suppose you don't need to worry about older browsers but only the latest releases).
You can use the old friend display:table to re order your element.
Lets say this is your source.
<div id="container">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
In order to reorder try this.
#container{
display: table;
}
#content{
display: table-header-group;
}
#header{
display: table-row-group;
}
#footer{
display: table-footer-group;
}
bam. you got it. Here is the proof of concept. http://jsfiddle.net/k0La8egp/1/