I'm developing a website and I have some problem with bootstrap/CSS.
http://50.87.248.234/~placehx2/
On this page the main menu changes its style under 992px, but I want it in mobile style even on big size screen.
How have I to modify the media queries?
Many Thanks
#media (max-width:1024px) {
mobile code here
}
You can change the width to what you need for the site
This may be a very hacky way of achieving what you would like but if you can't find another way to do it, you could replace all the media min-widths with larger widths.
#media (min-width: 768px) {
//bootstrap classes go here
}
This should make the mobile style apply with bigger windows, but it's a bit of a pain to deal with if you plan on updating your bootstrap version later because you'll have to repeat it. But for a quick fix this will do.
Related
What's the best way to
achieve going from a menu like this :
to this when screensize reaches a certain width :
So basically change certain texts to icons.
Is the only way pre-defining it and changing the display property in css from none to block ? or is there a better way ?
You got it. I would start by in the correct order list all the elements for mobile and desktop together then display:none the ones you want to be hidden on desktop and go from there. Could do it with JS but that's a lot more work and could look wonky on load.
+1 on what #MPortman said, it'd be better to have a clear idea at the start;
I would use CSS Media Queries to do that.
You can for istance just use the display:none starting from a specific width.
The web inspector is useful to see some "common breakpoints" but you don't have to target #media rules at specific devices, it'd be better narrow to your desktop browser window and observe the natural breakpoints for your content.
Media queries are a good way to make responsive pages, you can hide or show elements from a certain width of the device used (mobile/desktop for example).
You can use them to set a minimum width and a maximum width.
For example:
/* If the screen size is between 768px and 900px (included), hide the element */
#media screen and (min-width: 768px) and (max-width: 900px) {
div.example {
display:none
}
}
Will hide the element on a screen bigger than 768px and 900px.
We are looking for a way to create a div class to only appear on mobile, ie. when the resolution is below 1024x768. We currently use:
hide-below-768
for resolutions above 768.
Would anyone be able to advise on setting for below?
Thanks in advance.
You're looking for media queries
#media screen and (max-width: 768px){
/* add css here */
}
This allows you to apply different class behaviours, wrapping and sizing rules depending on the browser view port size.
But this won't be just for mobiles. It's also works when reducing the width of the browser window on desktop browser.
It's part of a technique called responsive design.
http://www.w3schools.com/css/css_rwd_intro.asp
Im a total newbie as far as mobile devices are concerned. Anyhow, i created a webpage (still under construction) and implemented it on the existing wp theme called govpress (yes, i know it might not be the most practical way to make things happen but with my coding skills it was the easiest). Now i just cant get it working correctly with mobile devices. I havent found the code that makes it behave as it does. So, on a mobile it seems to scale the page to screen width resolution of the device(?). Also the background and the header div (full width) scales to device screen width. And even if i zoom out it doesnt enlarge the bg nor the header div. Is it the theme that has this behavior somewhere coded or is it somewhere in the css..!? Heeeelp, please!!!
Find the site on http://www.lifespectrum.eu
And heres my css: http://lifespectrum.eu/wp-content/themes/govpress/style.css
(lots of thrash there though)
Please ask if you need anything else!
Thanks in advance!
The scaling is done in the css file via media queries. Adjust these statements accordingly to make the background/header do what you want:
#media screen and (max-width: 840px)
#media screen and (max-device-width: 680px)
#media screen and (max-width: 480px)
Mobile behaviors are CSS. Your last CSS codes #media screen and (max-device-width: 680px) are doing this behavior. You can easily check your responsive style just by making your desktop window screen smaller and larger. By doing this, you can easily see that your logo header is responsive but your body content is staying the same.
I would inspect element on the body and do the same as you did with the .logo You can preview your changes by editing right in the inspect element with chrome (right-click & inspect element) just to see how it'll look.
It looks like your background/header are the only elements that have css written to resize them in the media queries cfnerd listed.
The content area has the classes you need to adjust settings for in the media queries at different widths. For example, you have .topwhite and .top divs set in the css to a static width of 810px. Once the window width is smaller than 810px those will give you the nasty horizontal scrolling bars. One quick fix is to set them as a
width:100%;
max-width:810px;
so that at most they can go to the original size you set but as the device or window width gets smaller the size of those divs will shrink along with it. That will only help you with the containers, you will have to also add new css settings for the contents as well. But you can use the same idea.
You may need to implement the viewport mets tag. See https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
I am working on my first responsive custom theme and I've run into a couple of snags but the kicker is this one.
I have an aside that I float to the right so that the main content will flow around it. On the mobile version, though, I need for the aside to be BELOW the content.
How do I do that?
Here is the page: http://digitaldemo.net/landmark/whats-in-it-for-you
Many thanks!
Cynthia
Link is not working.
Anyway, Responsive uses media queries + fluid margins/padding and widths. You can actually do some media queries like:
#media only screen and (min-width: 480px) { aside { float:none; } }
You can play with media queries.
I just learned how to use CSS media queries to make my page fit the screen when the user re-sizes the window, or has a different screen resolution.
My page is designed so that the user won't have to scroll at all.
I want to make my page to fit on 1280px by 768px and 1280px by 960px screen resolution.
The problem is, the page gets all messed up when I have similar widths (1280px).
Could someone please assist me?
I greatly appreciate your help!
You can setup styles between specific dimmensions. For example, something like this:
#media(min-width:768px) and (max-width:979px){
<styles go here>
}
And then, anytime the viewport is between these two dimensions, your styles will adhere.
And I just realized how old this post is, but I'll go ahead and add it anyway in hopes it helps someone out.
Use a comma to specify two (or more) different rules:
#media screen and (max-width: 995px) , screen and (max-height: 700px) {
...
}
You might wanna check out http://css-tricks.com/resolution-specific-stylesheets/
It's an excellent guide on how to create multiple stylesheets for different resolutions.