I'm not sure if I'm asking this question right, but couldn't think of a better wording. I am playing with a new responsive bootstrap layout, one with a fixed collapsable side menu. You know, because it's the new black.
Anyway, I setup an #media (max-width: 767px) {...} in my css and threw in some stuff to adjust the workspace around when the screen is resized. That works. Then I decided to add a button to manually toggle even if the screen was over 767px, cause... choice.
But I found myself having to repeat all the styles I put in the #media block. And that seems dumb to me, because if I tweak some numbers I'll have to tweak in several places. But I can't seem to come up with how to organize it to not repeat.
Am I missing something? Or is this where I need to relent and start using LESS or some such?
Here is a fiddle: http://jsfiddle.net/yn5n9/
(note: to get the fiddle working the 'result' pane needs to be bigger than 767px).
notice in the #media there is this:
aside {...}
.main-container {...}
#sidebar-header {...}
but then to get the toggle button working I have these (with the same definitions):
.hide-it aside {...}
.hide-it .main-container {...}
.hide-it #sidebar-header {...}
triggered by $('body').toggleClass("hide-it")
Thanks.
No way to do this with current CSS3 specs, although the upcoming CSS variables might do the trick in the near future. You're stuck with LESS/SASS/etc.
BTW, I'm assuming JavaScript is not an option.
Related
I simply want to reduce desktop view width slightly but can't get it to work with media query. My latest attempt is
#media (min-width: 992px) and (max-width: 1199.98px) {
html, body {
max-width: 80%;
}
}
but it has no affect. I don't think I want to mess with container b/c that would leave out the navbar. Using my own stylesheet (added below bootstrap cdn stuff) rather than using the media queries directly in template.html but I don't know if that makes any difference. Am I trying to do this the right way or am I completely missing something?
You don't want go banging around on high-level elements when using a layout library. This limits what you and others can do in the page later (say you want a full-width banner somewhere). You also probably don't want to casually override all instances of a Bootstrap class.
In this case, look at adding a custom class to the .container or .container-fluid element, limiting its width:
.container.narrow {
max-width: 80%;
}
Use that for any containers where you want a narrower width, and use containers without that class for wider content.
<div class="container narrow"> ... </div>
Whether you apply this in a media query is probably immaterial.
I was strugglng to find the answer to my screen not working correctly for the mobile and below answer from you worked like a charm. Thanks so much for your answer. I removed the meta-name line and it worked like a charm.
Mohan
#Beanic
I presume that you have added the viewport tag for that() –
Jan 22, 2020 at 12:50
I need to improve my webpage design, when shown on smartphone.I am working in wordpress and making alterations through the childtheme. I am using a media query. Right now the #media is set to min-width 600px.
However NOTHING is happening. No matter how i tweek the code or what setting/classes/div's I am using, nothing changes when I go to see the page on a smartphone. The closest I got was modifying a .h3 tag, but then alterations appeared in screen mode - not in smartphone mode.
Even weider this code was working fine a couple of days ago, and .Profilbillede was repositioned using this media query.
Is there any way that the media query cannot be "linked" correctly, in the child theme? I've tried to look for syntax errors, but I cannot find any.
Specifically I need to add padding to h2#lfb_mainFormTitle. Right after this ... needs to be positioned lower and then follows
which need to be positioned below the .... Am i making any sense?
This is the first time I am doing this
--------------------------CSS here--------------------------
#media only screen and (min-width: 375px) {
/*billede nederst til højre*/
.Profilbillede {transform: translateY(-46px;)
}
h2#lfb_mainFormTitle {
font-size:32px!important;
background-color: blue;
}
}
Let I have 2 classes named class1 and class2. Also I have an element with id="responsive_element". What I want is to assign class1 to this element when screen size is below 768px and class2 otherwise.
I can do this in Less like:
#media screen and (max-width:768px){
#responsive_element{
.class1()
}
}
#media screen and (min-width:769px){
#responsive_element{
.class2()
}
}
Is there any "CSS only" way to achieve this?
Edit: I think I couldn't explain my question clear enough. I am already able to do this by compiling less, but the size of css file grows for the long class definitions and using them too much. I want to handle it with simply changing class of the element .
Except for the .class1() and .class2() calls, your Less code already is CSS. Specifically, the #media queries that apply styling based on screen size aren't Less-specific. So, for example, the following is pure CSS:
#media screen and (max-width:768px){
#responsive_element{
color: blue;
}
}
#media screen and (min-width:769px){
#responsive_element{
color: red;
}
}
If you want to convert your Less into CSS, all you need to do is copy the CSS code from .class1 and .class2 into the place of the .class1() and .class2() calls. In fact, since Less is implemented as a converter to CSS, you can just use the online converter at LESS2CSS to do the conversion for you.
If you're asking if there's a way in plain CSS to write these queries so that they use an existing .class1 and .class2 style definition without copying, then I believe the answer is no. The main reason Less was invented was because CSS doesn't support this kind of reuse of styling information.
If you mean, is there a way to use CSS alone to change the class of an element in response to changing screen sizes (literally, adding or removing new classnames to the element's HTML "class" attribute so CSS for different classes will take effect on that element), then the answer is simply "no, you cannot do this with CSS alone".
(Less can't do this either. Your original Less code doesn't change the class attribute of the element, as you can plainly see by looking at the generated CSS. It just uses classes as a handy trick to name sections of shareable CSS.)
The only way to change the element's class in the manner you seem to want is to make changes to the DOM, which you can obviously do via JavaScript but not with CSS alone.
I'm trying to figure out a way to make this work using CSS. I use wordpress and a theme so I can't really change much of the markup so I'm trying to solve this problem with CSS first.
I'm building a site with 3 columns article. It's working fine on desktop but when you start resizing. It goes like this.
What I want is that 'First post from Salon87 Brooklyn' should be next to 'Second Post' like this.
And this is what I want it to look like on desktop
Here's the code. http://www.salon87.nyc/news/
The problem with the HTML is that, there is an element fix added to the blocks. You need to hide it for mobile devices. Try changing 991px to your requirement.
CSS
#media (max-width: 991px) {
.fix {
display: none;
}
}
I am building a website and I need it to behave so that if the window is fullscreen (or any size where width > X px) - it should show the sidebar. If the user resizes the window's width below a certain amount, the sidebar should disappear (display:none).
A prime example to look at is google's news page (news.google.com) - there is a right sidebar which is only visible when the width of the page is above a certain threshold.
I'm usually pretty good in searching google/stack exchange and finding the answer I need, but in this case, maybe it's because of the use of the word 'dynamic' but I can't think of any other way to phrase it, i'm getting a lot of hits which are not what I need.
If I were to think of a solution on my own, I would perhaps add a javascript listener which constantly monitors the x value of the 'viewable area' and have a function constantly running that would do something like, if viewable area X value is lower than my threshold, change the style of my sidbar div to display:none. I think that would work, but I don't know if it's the best way to do this.
Thank you.
What about max-width Media Queries?
#media screen and ( max-width: 768px ) {
/* When the viewport is 768px or less,
hide #sidebar */
#sidebar {
display: none;
}
}
Demo: http://jsfiddle.net/jonathansampson/6Pvyt/show/
For IE6-8, https://github.com/scottjehl/Respond
I believe CSS Media Queries is the best solution as answered already by Jonathan Sampson,
but as youve hinted at it in your question about using a javascript listener I thought I best explain a better (IMO) JS solution using jQuery's on event.
e.g.
jQuery(window).on({
"resize": function(){
if(jQuery(window).width() > 750) {
//code to show sidebar
jQuery(#sidebar).removeclass("hidden");
} else {
//code to hide sidebar e.g.
jQuery(#sidebar).addclass("hidden");
}
}
};
});
What you need is CSS Media queries. http://www.w3.org/TR/css3-mediaqueries/
I use Twitter's bootstrap framework which includes a whole slew of responsive screen functionality.