I think i have some css problem.
At fullpage width the slider width is ok.
But at #media screen and (max-width: 980px) the slider is missing on each side.
Any one got a clue?
URL: removed.
In media query #media screen and (max-width: 980px) you are giving width:535px to bx-wrapper. Remove that line & it will work.
Try changing line 79 in your responsive.css
To 600px width.
.bx-wrapper{width:600px !important; margin-left:auto; margin-right:auto;}
The sides are missing because there is a width:535px !important set for the .bx-wrapper in the media query for #media screen and (max-width: 980px). Try overriding this in your style sheet with this
.bx-wrapper{
width:100% !important;
}
Add this in your style-sheet to the media query #media screen and (max-width: 980px)
Related
I have a problem with media queries in a 320px width.
I tried the next codes to set the query but browsers don't recognise it, so it doesn't work correctly:
1- #media only screen and (min-width: 320px) {
2- #media (min-width:320 px) and (max-width:480 px)
3- #media (max-width: 320px){
None of them work for me. What am I doing wrong?
THANKS A LOT!
Try
#media only screen and (min-width:3.33%){
.yourClass{
width : 20%;
}
}
And its better that u use % instead of px
With twitter bootstrap i applied
#media only screen and (min-width : 768px){
}
but this media query is working on all other width values too, such as 992px & 1200px.
Any solution?
1)Please check whether you have included the meta tag in the head section of your HTML document as
<meta name="viewport" content="width=device-width, initial-scale=1.0">
If this line is not present then none of your media query would work.
2) If you override bootstrap break points in your style sheet make sure your stylesheet is linked to your application properly.
3)understanding how min-width and max-width works will help you. If you are trying some wrong combinations, results may be weird :)
#media (min-width:480px) {}
The styles inside this media query would apply only if your viewport is minimum 480px or wider than that.
#media (max-width:767px){}
The styles inside this media query would apply to your viewport only upto 767px. For any resolution higher than 767px our styles won't be applied.
#media screen
This tells that this particular styles are only applicable to screen and not for print,projection or handheld. So #media screen or #media only screen wouldn't harm your media queries much.
These are some of my tips to troubleshoot media queries. Hope this would help you resolve your issue.
Change media Query to
#media screen and (min-width: 768px) and (max-width: 900px) {
}
Or any size between you want.
For more Details Refer This link.
You can use max-width. when screen regulation is maximum 992px, then it will work.
#media only screen and (max-width : 992px){
/*your styles for Tab device*/
}
You can use max-width. when screen regulation is maximum 767px, then it will work.
#media only screen and (max-width : 767px){
/*your styles for mobile device*/
}
Got it working now.
Mobile with max only then parts from to and above 1200 is reading default.
#media (max-width: 640px) {
}
#media (min-width:640px) and (max-width: 768px) {
}
#media (min-width: 768px) and (max-width:992px){
}
#media (min-width: 992px) and (max-width:1200px) {
}
i hope this may work for you
Please Define it in your style.css not in bootstrap
#media (min-width:768px)
{
}
hi all i have a little problem here i have some divs that i have positioned in below screen width
#media all and (min-width: 1024px) and (max-width: 1399px) {
.logo{margin-top:70px;}
.menu_bt{display:block; margin-left:30px;}
.search_bt{display:block; margin-left:30px;}
}
so i above u can see i have positioned some divs and i have shown some hidden divs and they are looking fine on above screen width but when i change browser width to 768px it doesn't show the styles i have set in 1024px screen width for e.g(.menu_bt and .search_bt) i have changed them from display:none to display:block but they doesn't show up in 786px screen width.i have to set those above properties in below mentioned screen width to get them ....i dont know whats the issue please help me out
#media all and (min-width: 768px) and (max-width: 1023px) {
.logo{margin-top:70px;}
.menu_bt{display:block; margin-left:30px;}
.search_bt{display:block; margin-left:30px;}
}
I have a bar that spans across the page (100% width) with a child container inside of it that spans 80% of the parent container's width.
I have the following CSS media query that is supposed to increase the child container's width from 80% to 100%:
#media screen and (max-width: 900px), screen and (max-device-width: 900px){
#imagebar .container{
width: 100%;
}
}
However, using the dimensions given to me by my chrome developer tools, the query is taking affect at a width of 990px. Not 900px. This is occurring with all my media queries; they are all activating 80-100px earlier than they should be. Anyone know what might be causing this?
This is formatted wrong.
#media screen and (max-width: 900px), screen and (max-device-width: 900px){
#imagebar{
.container{
width: 100%;
}
}
}
should be:
#media screen and (max-width: 900px), screen and (max-device-width: 900px){
#imagebar .container{
width: 100%; }
If you want to call on an element inside another element, dont open both elements, just specify which element in which parent you want to edit or change.
You can try like this it will work for you
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
#media only screen and (min-width: 480px) and (max-width: 767px) {
your css here
}
I'm working with Media screens for the first time and They don't quite seem to be working the way they're supposed too....
#media only screen and (max-width : 320px) {
all the css stylings within here and it shows up as this as it's supposed to.
#media only screen and (max-width : 321px) {
all css stylings that i place in here don't apply to the page when the width goes beyond 321 px. which isn't supposed to happen.... for example if i were to change any text color nothing would end up changing.
thanks in advance for any help :)
The CSS you write in this media query will be applied to the screen which has width less than 321px;
#media only screen and (max-width : 321px) {
if you want to apply the same CSS when you resize it beyond 321px then you need to increase the width as per your requirements -
#media screen and (max-width: 700px){
You need to write Media Query to a class or element as -
#media screen and (max-width: 700px){
body{
font-size:20px;
color:red;
}
}
Demo Here