Since i tried the style Sandstone, the Sidebar is a bit to high/Navbar runs into the sidebar. Same with the dropdown on the left side.
Sandstone: https://bootswatch.com/sandstone/
Template: http://startbootstrap.com/template-overviews/sb-admin-2/
I tried already set max-heigh: 50px; but which breaks the mobile, design because it needs to be extended cause of the right dropdown.
Any ideas?
Why don't you try to set max-height:50px but with #media-screen css rule?
For example: #media screen and (min-width: 769px){#sidebar{max-height:50px;}}
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;
}
}
I need to delete one item in my mobile menu via Custom.css. I don't want to edit other files in WordPress.
This is screen of my mobile menu items. And I want delete just one position. It's easy to do that via Google Chrome editor, but what do I need to add in my custom.css to save this permanently?
Screen of my menu before originally:
Link to website: http://test.projekt-tenis.pl/wordpress/
All i want is to delete only : " Oferta " from the menu.
After editing it in google chrome my menu looks like :
As you can see " Ofera" is deleted.
I want just do this via Custom.css. I saw a few topic about it but still don't know how can i do that.
This should fix it. We don't need to delete the DOM node using JavaScript or something. Each and every menu item in WordPress can be uniquely identified using their Post ID. In your case, it is 988. We can use display: none; for that particular element and hide it using CSS. This is the sole reason for having #media queries.
Use this CSS in your custom.css.
#media screen and (max-width: 960px) {
#menu-item-988 {
display: none;
}
}
I am targeting the clients with a screen size of 960px or less, which can be loosely considered to be a mobile device. You can always refer to CSS Tricks' Media Queries for Standard Devices.
Preview:
"Deleting" an item from the DOM can be done in a variety of ways. I imagine what you're going for can be achieved with a simple display: none; property assigned to that item in your CSS file, this will remove the element visually but will not delete it from DOM.
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'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.