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;
}
}
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;
}
}
My website is www.dreamzabroad.in,
I want to make it mobile responsive. Like when you visit the homepage the slider is placed beneath the header logo, i want to push it down and make the heading tags fit to the mobile display?
One of the simplest ways to make your website responsive is to use Bootstrap. Use this link as a starting point:
http://getbootstrap.com/getting-started/
You will need to include the bootstrap files on your website and use their classes which you will find on their website in order to make your content change widths and fall under each other on different screen sizes.
You want to look into media queries, which will allow you to change your CSS based on certain conditions.
If this is too daunting you can simply use a framework such as Bootstrap which has done the groundwork already, you just need to add the relevant documentation.
Use Bootstrap media query or simply use custom media CSS properties.
for bootstrap you can simply use CDN link like as below in your index style tag to use CSS without downloading in your project and then just apply available classes in your code.
<link rel="stylesheet" href="./contact_files/bootstrap.min.css" />
Add below Media CSS according to your device width in style tag of your index or main achieve responsiveness.
#media screen and (max-width: 600px) {
body {
background-color: Yellow;
color: Pink;
}
}
#media screen and (max-width: 711px) {
body {
background-color: Green;
color: Red;
}
}
References:
https://www.geeksforgeeks.org/bootstrap-media-queries/
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;}}
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.