I need to apply some css rules only for when bootstrap stacks the columns when resizing the page.
At the moment i am using media queries like this one:
#media (max-width: 983px) {
.footer-links {
margin-top: 0;
}
.col-info {
margin-top: 15px;
}
.show-link {
color: #FFFFFF;
}
.show-title {
color: #FFFFFF;
}
}
The problem with this is that the width value is fixed size. On a smaller device the columns would stack with a lower width.
So I need to detect when bootstrap wraps the columns as well as when it expands them again.
As far as I remember, bootstrap 'stacks' after iPad portrait size:
Before iPad =
#media (max-width: 768px) {
After iPad =
#media (max-width: 767px) {
So, to affect the styles, add your own overrides to the second media query and make sure that the CSS is declared after the bootstrap css and specificity is correct.
Related
i'm new to html and css and i've been having a few issues dealing with media queries.
Basically, i have a website that only "actually works" when its been visualizated in a 1920x1080 resolution, so i created a few media queries on my css to support other resolutions as well. I'm having a little bit of trouble on making a media querie to support the 1280x1024px resolution. When the browser is not on fullscreen, on windowed mod, none of my changes written in the css are applied. But when i go fullscreen, everything works just fine.
Also, i cant set 1280 width for this cuz it'll mess up my other media querie which was created for the 1280x768 resolution
Can anybody help me with this please?
Appreciate it.
This is how it looks on windowed mode, with none of my changes written in the CSS applied
This is how it looks on fullscreen, now, its actually doing what it's supposed to do
#media screen and (height:1024px) {
.white_round_background{
margin-left: 320px;
height: 170vh;
width: 160vw;
background-color: rgb(197, 183, 183);
}
.menunav {
left: 38%;
top: 4%;
}
.system_selection {
margin: 420px 0 0 0px;
height: 95px;
}
#logo_sliding_menu {
margin-top: 710px;
}
}
Hum... Just a guess at this point, but pay attention to that: the sequential order of css code matters.
You can have a lot of media-queries definitions, but they have to be in a specific order (from the highest to lowest). EG:
#media only screen and (max-heigth: 600px) {}
and only then
#media only screen and (max-width: 500px){}
ALSO, instead of just a specific height, maybe try to use the max-height property (which will be applied to devices having a resolution small than that height. Because aiming just one height of 1024px will not work on windows being 1023px height or less or 1025 or more...
.yourClass {
/* CSS applied to all devices above 1024px height */
}
#media only screen and (max-width: 1024px){
.yourClass {
/* CSS applied to all devices smaller than 1024px height */
}
}
#media only screen and (max-width: 955px){
.yourClass {
/* CSS applied to all devices smaller than 955px height */
}
}
#media only screen and (max-width: 500px){
.yourClass {
/* CSS applied to all devices smaller than 500px height */
}
}
/* And so on */
You can also play with min-height and max-height in the same query :
#media screen and (min-height: 400px) and (max-height: 900px)
{
.yourClass {
/* CSS applied to all devices
no less than 400px height and no more than 900px height */
}
}
We have our website in wordpress, below is the link for your reference.
https://timesandtrendsacademy.com/
There is one foobar which is shown at the bottom of every page of our website in sticky and scrolling mode.
I have put some custom css for the same for full width look, below for your reference,
.foobar-container-left{display:none;}
.foobar-container-right{display:none;}
#foobar-message-0{width:100%;}
#media only screen and (max-width:500){
#branches{width:100%;}
}
It's working perfect on desktop, but when we resizing our screen or when we open on mobile devices that width is not taking a full-width.
It is showing in a 150px width size that is not looking good in mobile devices.
we have to add some css or media query to reflect proper on all the devices.
Please advice us.
Thanks,
Gopal
That's because there's a style with a !important that overwrites your styles.
#media only screen and (max-width: 800px) and (min-width: 320px) {
#foobar-message-0 {
margin-top: 10px;
width: 150px!important;
}
}
Remove the !important, edit the style, or use a more specific selector with !important.
Example:
#media only screen and (max-width: 800px) {
#foobar-message-0 {
width: 100%!important;
}
}
These styles should be after the styles to overwrite.
Add this css in style editor
#media only screen and (max-width: 767px){
.foobar-container-inner {
margin-left: 0important;
width:100%!important;
margin-top: -40px!important;
}
#foobar-message-0 {
width:100%!important;
}
}
I am trying to make a site responsive, and when it scales down, I want to cancel out the images. All my images are in HTML and I am trying to make them not show up as the screen scales down.
For this you can use media-queries.
Example:
#media screen and (max-width: 768px) {
.image-1 {
display: none;
}
}
This will not display the image when the screen size (width) is smaller than 768px.
You can learn more about media-queries here.
CSS media queries are used for this
#media only screen and (max-width: 600px) {
/* anything here will have properties mentioned here
if you want to hide all the images, use "img", else, use your specified class, such as .myImage */
img {
display: none;
}
/* OR */
.images-to-hide {
display: none;
}
}
In (max-width: 600px), you put the maximum screen width after which the styles stop working - or rather - the minimum value needed for these styles to be applied
Here's a more detailed tutorial: W3Schools.com - Media Queries
I'm using materialize css where I have a logo jpeg whose padding is adjusted at the top for medium and up screens. For mobile screen I need to adjust left padding.
For medium and up I have this css style
#mylogo {
padding-top: 15px;
}
and html
<div class="nav-wrapper container"><a id="logo-container" href="#" class="brand-logo">
<img src="images/logo.jpeg" id="mylogo" alt="Logo">
My Logo
</a>
</div>
I use the same img tag for screens small and down. What do I have to add or change in my css to have padding-left instead of top in effect for small and down screens?
You can use media queries for that.
Considering that materializecss uses three different screen sizes (<=600px for tablets, <=992px for desktops and >992px for everything else) you have to provide the rule only for tablet devices.
In css you should write something like this:
#media (max-width: 600px) {
#mylogo{
padding-left: 15px;
}
}
#media (min-width: 601px) {
#mylogo{
padding-top: 15px;
padding-left:0;
}
}
Add media queries.
#media screen and (max-width: 480px) {
#mylogo {
padding-left: 10px;
}
}
#media screen and (min-width: 481px) {
#mylogo {
padding-left: 0;
padding-top: 15px;
}
}
On screens up to 480px (you can adjust this), padding left will be added to your image. If a device is at least 481px, your image's padding left will be reset to 0, while padding top will be assigned 15px.
As you can see, you can use different conditions—min-width and max-width being just two. If you want to see what else is available, check out this link: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Hi I'm fairly new to bootstrap and what I'm trying to achieve is to have a jumbotron on top of my page with different paragraph formatting to accommodate for a background image which takes lets say 30% of full width space.
I have offset my text by padding-left: 300px; and it looks fine on desktops but this rule also applies to a paragraph in mobile device mode resulting it being very skinny and tall.
Is there a way where I can set lets say 3 different paragraphs each showing under certain screen size?
Just use media queries:
#media screen and (max-width: 320px)
{
p{
padding-left: 0;
}
}
#media screen and (min-width: 321px) and (max-width:800px)
{
p{
padding-left: 100px;
}
}
#media screen and (min-width: 801px)
{
p{
padding-left: 300px;
}
}