I would like my Bootstrap layout to not act responsive when the width is 768px or smaller. You can view my current application HTML / CSS here, https://codepen.io/anon/pen/xXdYNa. I have had to make some changes to some of the standard Bootstrap styles so it might make things a bit more tricker.
Does anyone have any tips on how to achieve this by using CSS overrides, similar to what I have done here:
#media (min-width: 768px) {
.main {
padding-left: 250px;
padding-top: 89px;
}
}
Thanks!
How about just giving .container-fluid a min-width with 768px?
EDIT:
Adding the following worked for me:
.container-fluid {
min-width: 768px;
}
.main {
padding-left: 250px;
padding-top: 89px;
}
A min-width in combination with removing the media query which is around your .main should work.
https://codepen.io/anon/pen/EwmEXr
#media only screen and (max-width: 768px) {
.main {
padding-left: 0px;
padding-top: 0px;
}
}
Related
.container {
padding-left: 15px;
padding-right: 15px;
margin-left: auto;
margin-right: auto;
}
/* Small */
#media (min-width: 768px) {
.container {
width: 750px;
}
}
/* Medium */
#media (min-width: 992px) {
.container {
width: 970px;
}
}
/* Large */
#media (min-width: 1200px) {
.container {
width: 1170px;
}
}
I tend to use containers everywhere To middle content in different devices and keep it balanced (media) like min-width 1200px {width: 1200px}etc. However when I try to style a site that begins from the edges. it comes in the middle which does not help in these kinds of sites.
what should I do?
If you are going to say get rid of containers, I do not know how to work without them Can you tell me what to do instead of the containers that I tend to use?
I have a problem with width and height of images on the smartphone. I use this code. But I don't know why on the smartphone it also uses the same height of 13em like on desktop screen. All other amartphone definitions work fine.
#media only screen and (max-device-width: 60em) {
/* STYLES HERE for DEVICES with physical max-screen width of 60em */
article img {
float: left;
margin-right: 0.2em;
width: 100%;
height: auto;
}
}
article img {
float: left;
margin-right: 0.2em;
height: 13em;
}
Try putting the media query under the article img.
Not related but you don't need to repeat float and margin-right since you're not overriding them.
I am getting Mobile view issue, whenever I am loading the website it is going in the right direction. Every section is equal sized but dont know why this is happening. This problem is only with iphones..
I tried adding this code:
body{
overflow:hidden;
}
but it is also not working. Please help me solving this issue.
website link:
http://demo.lamppostmedia.in/arklan1
I have inspected it on iPhoneX which device width is 375px.
and you are giving width: 400px; to wrapper, which is creating horizontal scroll bar.
#media (max-width: 767px)
.wrapper {
margin-left: -15px;
width: 400px;
margin-top: -90px;
}
you can use it like below.
#media (max-width: 767px)
.wrapper {
margin-left: -15px;
max-width: 400px; // modified
width:100%; // added
margin-top: -90px;
}
How can I set padding to 0 when I have resolution 1366x768px if its higher then 768 then i want padding to be 60 on top
This is what I tried so far but it is not working (tried with min-height, max-height, etc). Any other solution for this?
#media (min-height: 768px) {
body{
padding-top: 0px;
}
}
body {
padding-top: 60px;
padding-bottom: 0px;
margin: 5%;
}
so how can i remove padding when my resolution is smaller then 786px ?
You specified the rules in wrong order. They should be:
body {
padding-top: 0;
padding-bottom: 0;
margin: 5%;
}
#media (min-height: 768px) {
body {
padding-top: 60px;
}
}
NB: it seems like you are trying to target 768px tall screens, the actual height used by the browser will be lesser.
I have added a new footer to my twitter boostrap website but when I resize the window gaps appear on the left and right.
I know that this is related to this css code...
#media (max-width: 767px) {
body {
padding-left: 20px;
padding-right: 20px;
}
If I change the padding to 0px then footer gaps go away but the whole page looses a margin.
I have tried this but it didn't work.
#media (max-width: 767px) {
footer {
padding-left: 0px;
padding-right: 0px;
}
Any ideas?
Try using negative margins, the same approach the nav uses. I didn't try this, but something like this should work:
#media (max-width: 767px) {
footer {
padding-left: -20px;
padding-right: -20px;
}
}