I'm trying to utilize max-width on a button with a margin-left and margin-right set to 28px.
When my site is shrunk down for mobile, this button still retains its margins and carries over off-screen. How can I fix this?
Here's my CSS for the button:
.button {
border: 1px solid;
border-color: #5094CF;
background: #FFFFFF;
width: 450px;
max-width: 100%;
height: 48px;
margin: 0 28px 0 28px;
}
You need mediaqueries for all resolutions you need, for example:
#media (max-width: 600px) {
.box {
margin: 0;
}
}
#media (max-width: 400px) {
.box {
margin: 10px;
}
}
Different margins depending on the resolution of the client.
Good luck
There's a pleasantly easy fix for your issue, try this:
#media all and (max-width: 658px) { // for mobile devices
.button{
// your preferred styling properties for displaying in mobile devices
}
}
Related
I am trying to add a horizontal scroll bar on mobile-only however the media query that I do doesn't display on mobile devices:
#media (min-width:480px) {
::-webkit-scrollbar {
height: 4px;
width: 4px;
overflow: visible;
border: 1px solid #d5d5d5;
}
::-webkit-scrollbar-track {
border-radius: 0;
background: #eeeeee;
}
::-webkit-scrollbar-thumb {
border-radius: 0;
background: #b0b0b0;
}
}
It seems that it doesn't trigger when I go into mobile view.
What have I done wrong?
First, as pointed out by Aman, #media (min-width:480px) {} will trigger on screens bigger than 480px. If you want a query triggered below 460px try #media (max-width: 480px) {}.
Secondly, your CSS code is styling the scroll bar rather than activating/deactivating scroll, which is what I understand you need.
To activate horizontal scrolling on mobile only try:
.selector {
overflow-y: auto;
overflow-x: auto; /* <-- this enables horizontal scroll */
}
#media (min-width: 480px) { /* <-- For screens bigger than 480px */
.selector {
overflow-x: hidden; /* <-- this disables it */
}
}
I'm fairly new to the world of scripts and coding, so I do not know the best terms to use.
I am trying to make a somewhat simple website, and I want my header background to have padding-bottom 120px at min-width 600px, and 0 at 1050. However, the padding-bottom only updates when changed in the properties for header.
Here is my code:
header {
border-radius: 5px;
display: block;
width: auto;
min-height: 200px;
background: #E44;
padding-top: 40px;
padding-left: 38px;
padding-right: 38px;
padding-bottom: 136px;
}
#media screen and (min-width: 600px) {
.header {
padding-bottom:120px
}
}
#media screen and (min-width: 1050px) {
.header {
padding-bottom: 0px;
}
}
The padding-bottom stays at 136px no matter the min-width of the window.
Make sure that you know the difference the dot does. .header is selection the header class. While header selects the element. Your code works fine, as you can see here, I'm using the media queries to change the background color instead of padding, just to make the point clear.
Fiddle example
header {
border-radius: 5px;
display: block;
width: auto;
min-height: 200px;
background: #E44;
padding-top: 40px;
padding-left: 38px;
padding-right: 38px;
padding-bottom: 136px;
}
#media screen and (min-width: 600px) {
.header {
background-color: blue;
}
}
#media screen and (min-width: 1050px) {
.header {
background-color: green;
}
}
<header class="header">
</header>
There is a small typo here. You have an additional dot(.) which will mean a class selector as against the other style which is on element selector.
#media screen and (min-width: 600px) {
header {
padding-bottom:120px
}
}
#media screen and (min-width: 1050px) {
header {
padding-bottom: 0px;
}
}
i have added background in my bootstrap navbar dropdown menu, it's working completely fine on big screen devices, but on small screen devices like mobile phone the background colors become transparent and the menu overlaps my content
.nav-dropdown {
background: #fff;
#include border-radius($popover);
box-shadow: 0 1px 2px rgba(0,0,0,.25),0 0 1px rgba(0,0,0,.35);
border: none;
top: 134%;
is there anyway to make the dropdown background be same on small screen devices.
Edit
I tried Chandra kumar answer but it doesn't worked out:
#media only screen and (min-width : 480px) {
body {
padding-top: 67px;
}
.navbar-header {
border-bottom: none;
}
.navbar-fixed-top {
position: fixed;
}
nav.navbar {
padding: 5px 0;
.filter-links {
margin-top: 16px;
margin-left: 0;
}
.nav-dropdown {
background: #fff;
}
#logo {
width: 138px;
margin-left: 0;
}
.new-post-button {
display: inline-flex;
}
}
Desktop View:
Mobile View Right Now I want it to be exactly like desktop view
I suggest to use media queries and add the classes you want to tweak
For example:
/* Extra Small Devices, Phones */
#media only screen and (min-width : 480px) {
.nav-dropdown {
background: #fff;
}
}
For Bootstrap 3 default media queries you may found it here
I am learning the basics of responsive design, and started from scratch. I want a very simple page with no margin on the sides. Yet on an iphone, the site has still a fairly big white margin left and right. This is the CSS i have so far:
div#header_image img{
max-width:100%;
}
div#chart img{
max-width:100%;
}
div#Chart_place{
margin-bottom:2em;
}
#media screen and (min-width: 800px) {
div#container{
width:800px;
margin: 0 auto;
}
}
#media screen and (max-width: 800px) {
div#container{
width:max-width;
margin: 0;
padding: 0;
}
}
body{
font-family:Verdana, Geneva, sans-serif;
margin:0;
}
h1{
font-size: 1.5em;
margin-top:2em;
margin-bottom:2em;
}
ul{background-color:white;}
div#Feesboek_button{
}
input[type='text'], textarea {font-size:16px;}
What do I do wrong?
EDIT/UPDATE: Since my previous answer is not what you where looking for, use this:
html,body { margin:0; padding: 0; }
#container {
max-width: 800px;
padding: 0;
margin: 0 auto;
/*for ilustration purposes*/
background-color: #f13700;
}
#media (max-width: 800px) {
#container {
padding: 0;
margin: 0;
}
}
There you go, no margins on 800px or less.
See it here: http://jsfiddle.net/fCzT9/
Full screen: http://jsfiddle.net/fCzT9/embedded/result/
Previous answer:
In your CSS you have:
#media screen and (min-width: 800px) {
div#container{
width:800px;
margin: 0 auto;
}
This will be applied for every device with a screen that is at least 800px. You have declared the width with a fixed 800px and margin: 0 auto will center that container with 800px in the screen. Take into account that your device might have a high density screen (called Retina in iPhones).
The solution to your problem depends on how your layout is based, but try this:
#media screen and (min-width: 800px) {
div#container{
width: 100%;
max-width: 80em;
margin: 0 auto;
}
This way, the maximun width will be 80 times the base font-size, 16px, resulting in 1280px. As the width is declared with 100%, it will take the available width in the screen. If the screen is bigger than 1280px, it won't go beyond it since it's the max-width.
Note: If you are not using box-sizing: border-box, if you add padding to the class which already has width:100%, the padding will be added as an extra to the element's resulting width which will cause it to go beyond the max-width and in small screens you will be able to side scroll your pages = not good.
I'm having some odd space issues on the left of my site. For some reason there is slightly more space on the left than on the right in mobile view, thus looking off-centered. I'm guessing its off for desktop view as well, but its not noticeable. I can't figure out what is making it this way. http://jeffreydowellphotography.com/
/* ---------->>> MOBILE gap/space issues <<<-----------*/
#media screen and (max-width: 400px) {
#pageWrapper { margin: 0;}
.sqs-layout .sqs-row .sqs-block:last-child {
padding-bottom: 0;
padding-top: 0;
}}
/* ---------->>> MOBILE center logo <<<-----------*/
#media only screen and (max-width: 400px) {
h1.logo {
text-align:center;
margin-bottom: 20px !important;
}}
/* ---------->>> MOBILE logo size <<<-----------*/
#media only screen and (max-width: 400px) {
.logo-image .logo img {
max-height: 110px;
margin: 5px;
width: auto;
}
.social-links {
padding-top: 20px;
}}
Try removing the margin: 5px; on .logo-image .logo img in your mobile styles. The image with the margin may be wider than the div that contains the image and it comes off as being non-centered.
UPDATE
I took a look at your site, its actually the margin on the .slide selector. Add this in your mobile styles:
.slide { margin: 0; }