I have the following CSS styles:
#media (min-width: 1280px)
{
.window-padding {
padding-top: 20px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 30px;
}
}
#media (min-width: 769px)
{
.window-padding {
padding-right: 20px;
padding-left: 20px;
padding-left: 10px;
padding-right: 10px;
}
}
.window-padding {
padding-right: 10px;
padding-left: 10px;
padding-left: 0px;
padding-right: 0px;
}
However, when I open in browser (width > 1280px), only padding-top and padding-bottom from min-width:1280px is applied. padding-left and padding-right is from style that doesn't have a #media condition.
Here is the what it applies:
EDIT:
I reordered CSS to have the lowest size first fixed the issue.
Also, I have duplicate padding styles by mistake.
Always call #media styles after your main css file(s), this may help you to override styles.
.window-padding {
padding-right: 10px;
padding-left: 10px;
padding-left: 0px;
padding-right: 0px;
}
#media (min-width: 1280px)
{
.window-padding {
padding-top: 20px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 30px;
}
}
#media (min-width: 769px) and (max-width: 1279px)
{
.window-padding {
padding-right: 20px;
padding-left: 20px;
padding-left: 10px;
padding-right: 10px;
}
}
reorder your css & Add Max-width
.window-padding {
padding-right: 50px;
padding-left: 50px;
}
#media (min-width: 1280px) {
.window-padding {
padding-top: 20px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 30px;
}
}
#media (min-width: 769px) and (max-width: 1279px) {
.window-padding {
padding-right: 20px;
padding-left: 20px;
}
}
First u go for default style ( after that increase the screen rez )
that means default > 768 > 1280 ( this apply for min-width )
if u choose to use max-width ( u go Default > 1280 > 768 )
for min width
.class {
your style
}
#media screen (min-width: 768) {
override default
}
#media screen (min-width: 1280) {
override 768
} and so on
for max-width
.class {
your style
}
#media screen (max-width: 1280) {
override default
}
#media screen (min-width: 768) {
override 1280
} and so on
Could anybody please advise why this is happening?
More important CSS styles should come at more lower level
Related
I would like to have 2 different margin for the same div depend on mobile and desktop view.
The code below can perform a margin-left: 70px; on desktop.
The problem arises on mobile view, it doesn't reset to margin-left: 0px;
How can I do it ?
Thanks.
.body-container {
padding-left: 0px;
padding-right: 0px;
max-width:1350px;
}
.content {
margin-left: 70px;
}
.content-collapsed {
margin-left: 0px;
}
You're not resetting margin in .content
You need to use media queries
The solution below uses non-mobile approach
body {
margin: 0;
}
.content {
background: red;
margin-left: 70px;
}
#media (max-width: 800px) { /*choose the width you prefer*/
.content {
margin-left: 0;
}
}
<div class="content">content</div>
The solution below uses mobile approach (recommended, also is the same used by bootstrap 4)
body {
margin: 0;
}
.content {
background: red;
margin-left: 0;
}
#media (min-width: 800px) { /*choose the width you prefer*/
.content {
margin-left: 70px;
}
}
<div class="content">content</div>
You can use media queries (MDN).
Example :
body {
margin: 0;
}
div {
width: 100px;
height: 100px;
border: 1px solid black;
margin-left: 0px; /* mobile*/
}
/* screen width higher than 750px */
#media screen and (min-width: 750px) {
div {
margin-left: 70px;
}
}
<div></div>
Use media query. Add:
/* For mobile*/
#media only screen and (max-width: 768px) {
div {
margin-left: 0;
}
}
This is the solution that worked the best for my case:
<style>
.body-container {
padding-left: 0px;
padding-right: 0px;
max-width:1350px;
}
.content {
margin-left: 70px;
}
##media (max-width: 800px) { /*choose the width you prefer*/
.content {
margin-left: 0px;
min-width: 100%;
}
}
</style>
Thank you. You made my day.
I want to create div in html with images and texx, but It should appears only on mobile version, how i can make this ?
Here is some code.
/*-- Mobile Design---- */
#media (min-width: 320px) and (max-width: 767px) {
/* put your css styles in here */
html,
body {
margin-top: 0;
margin-bottom: 0;
}
a.navbar-brand img {
padding: 0;
display: flex;
margin-left: 10px;
margin-right: auto;
width: 95%;
max-width: 200px;
}
.header {
height: 15%;
}
.navbar-toggler i {
font-size: 22px;
margin-right: 10px;
}
Hide the element by default and only show it when it fits your contraints. For example:
.yourElement {
display: none;
}
#media (min-width: 320px) and (max-width: 767px) {
.yourElement {
display: block;
}
}
I have created several #media Queries to try and capture different displays. Im using chrome developer tool and whenever I switch the size of display it defaults to whatevere media query is lowest in the css. My original solution to this was putting the smallest down bellow, but now when i test it with my monitor it says 1440px is being used instead of 1920px. So i solved my issue when it comes to Mobile devices but have recreated it with monitors. How can I get around this issue?
2286BowmanRoad.com
CSS sample Bellow it is replicated from high to low and consist of
Bottom -> Top 360, 375, 450, 680, 780, 1054, 1366, 1440, 1680, 1920, 2560, 3840
/* Start of Media only <1920 -------------------------------------------------------------------------------------------------------------------------- */
#media only screen and (max-width: 1920px) {
.fancyText { font-size: 2em; }
.smallerHeadline { font-size: 1.3em; }
.content {border-top:8px; margin: 0px; padding: 0px; width: 100%; } .footer { font-size: 0.8em; float: left; width: 100%; margin: 0px; padding-top: 35px; padding-bottom: 35px; letter-spacing: 1pt; }
.headline { letter-spacing: 0pt; font-size: 1.5em; }
.Wrap { max-width:1050px; padding-top: 15px; padding-bottom: 15px; }
.imageHeader { font-size: 1.5em; }
}
/* End of Media only <1920 -------------------------------------------------------------------------------------------------------------------------- */
/* Start of Media only <1680 -------------------------------------------------------------------------------------------------------------------------- */
#media only screen and (max-width: 1680) {
.fancyText { font-size: 2em; }
.smallerHeadline { font-size: 1.3em; }
.content {border-top:8px; margin: 0px; padding: 0px; width: 100%; } .footer { font-size: 0.8em; float: left; width: 100%; margin: 0px; padding-top: 35px; padding-bottom: 35px; letter-spacing: 1pt; }
.headline { letter-spacing: 0pt; font-size: 2em; }
.Wrap { max-width:1050px; padding-top: 15px; padding-bottom: 15px; }
.imageHeader { font-size: 1.5em; }
}
/* End of Media only <1680 -------------------------------------------------------------------------------------------------------------------------- */
/* Start of Media only <1440 -------------------------------------------------------------------------------------------------------------------------- */
#media only screen and (max-width: 1440px) {
.fancyText { font-size: 2em; }
.smallerHeadline { font-size: 1.3em; }
.content {border-top:8px; margin: 0px; padding: 0px; width: 100%; } .footer { font-size: 0.8em; float: left; width: 100%; margin: 0px; padding-top: 35px; padding-bottom: 35px; letter-spacing: 1pt; }
.headline { letter-spacing: 0pt; font-size: 2em; }
.Wrap { max-width:1050px; padding-top: 15px; padding-bottom: 15px; }
.imageHeader { font-size: 1.5em; }
}
/* End of Media only <1440 -------------------------------------------------------------------------------------------------------------------------- */
You structured your media queries incorrectly. You can either group all of your css that corresponds to each view port or you can target media queries on individual classes. Here is a guideline to see an example of properly structuring and the sequence.
// Extra small devices (portrait phones, less than 576px)
#media (max-width: 575.98px) { ... }
// Small devices (landscape phones, less than 768px)
#media (max-width: 767.98px) { ... }
// Medium devices (tablets, less than 992px)
#media (max-width: 991.98px) { ... }
// Large devices (desktops, less than 1200px)
#media (max-width: 1199.98px) { ... }
// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width
For future reference, please give more details about your problem. It would be much more helpful if you were able to share the CSS code that is not working so we can work with you to resolve the issue.
My first instinct is that you're not using media queries correctly, here's a couple examples for you to look at:
#media only screen and (min-device-width: 960px) {
#wrapper { width: 70%; }
}
#media only screen and (max-device-width: 960px) {
#wrapper { width: 100%; }
}
The first media query will activate for any device where the screen width is bigger or equal to 960px and the second media query will activate when the screen width is smaller or equal to 960px.
If you can, please update your post with more details about specifically what is working and some example CSS so we can help you resolve your problem.
I am using a div.wide tag in my stylesheet to display a fullscreen graphic at the top of a page.
div.wide {
height:500px;
background-image: url(http://www.vidalingua.com/images/pont-des-invalides.jpg);
background-position: 50%;
background-size: cover;
overflow:hidden;
}
When I reduce the screen to smaller widths, as would be seen on a phone, whitespace margins begin to appear.
http://vidalingua.com/blog/top-travel-blogs-for-france.php
How can I solve remove the whitespace to left and right of image at smaller screen resolutions?
That's because you have this rule in bootstrap.css's media query max-width:767px
#media (max-width: 767px) {
body {
padding-left: 20px;
padding-right: 20px;
}
}
so you need to add negative margin inside that query, something like this:
#media (max-width: 767px) {
div.wide {
margin: 0 -20px
}
}
If you try reset padding in body it will create horizontal scrollbar.
#media (max-width: 767px){
body {
padding-left: 20px;
padding-right: 20px;
}
.navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top {
margin-left: -20px;
margin-right: -20px;
}
}
change this to
#media (max-width: 767px){
body {
padding-left: 0px;
padding-right: 0px;
overflow:hidden;
}
.navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top {
margin-left: 0px;
margin-right: 0px;
}
}
I'm trying to make my website automatically adjust its content to screen size so if I enter the site from an iPhone or similar the layout should change.
#media (max-width: 600px) {
.logo {
font-size: 30px;
text-align: center;
}
.nav {
text-align: center;
font-size: 35px;
}
}
When I enter the page on google chrome on my computer the content changes as it should when I reduce the chrome window, but when I enter it from my iPhone 5 the page changes its content according this:
#media (min-width: 800px) {
.nav {
text-align: right;
margin-top: -30px;
margin-right: 20px;
}
.logo {
padding-top: 17px;
padding-bottom: 0;
}
}
Am I using the #media wrong or why doesn't the page adjust to my first piece of code when I enter it from my iPhone?
CSS
Try using Device width
#media only screen
and (min-device-width : 800px)
{
.nav {
text-align: right;
margin-top: -30px;
margin-right: 20px;
}
.logo {
padding-top: 17px;
padding-bottom: 0;
}
}