I'm experiencing some problems with my two stylesheets.
I've been trying to make my website mobile friendly so I created a separate CSS file for mobile. Like so:
<link rel="stylesheet" type="text/css" media = "screen" href="css/services.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type= "text/css" href="css/mobile/services.css"
media ="only screen and (max-width: 500px)" />
Except I've run into a problem with overiding the main CSS file with the mobile one for a specific problem (only one part is not overriding; everything else is fine).
In "css/services.css" (the main one) I have:
#pricing{
margin: 0px;
}
.pricing_tables{
width: 600px;
margin-bottom: 100px;
}
And in "css/mobile/services.css" (the mobile version) I have:
#pricing{
width: 270px;
}
.pricing_tables{
margin: 0 auto;
width: 270px;
margin-bottom: 30px;
}
Basically, I can't change it to have a smaller width. But I haven't run into any problems until now.
The element I'm trying to change is a table. #pricing is the also set at width:270px
Thanks In Advance!
Is there any reason why you wouldn't simplify your life and combine your two stylesheets into one?
See if this helps you:
http://codepen.io/panchroma/pen/BpNMvz
CSS
#pricing{
margin: 0px;
}
.pricing_tables{
width: 600px;
margin-bottom: 100px;
}
#media screen and (max-width: 500px) {
#pricing{
width: 270px;
}
.pricing_tables{
margin: 0 auto;
width: 270px;
margin-bottom: 30px;
}
}
Related
Using Bootstrap5 and adding a separate stylesheet as the last stylesheet in the list, I am trying to style the margins of the class .content I have this code at the end of my stylesheet...
.content {
width: 100vw;
margin-top: 0;
margin-bottom: 0;
background-color: white;
min-height: 80vh;
padding: 0;
}
#media only screen and (min-width: 768px) {
.content {
width: 70vw;
margin-left: 15vw;
margin-right: auto;
margin-top: 15vh;
margin-bottom: 15vh;
background-color: white;
min-height: 80vh;
padding: 0;
}
}
The web page uses <main class="content> wrapped around the content of the page.
The result I am wanting is to have the margins at zero on a mobile device, and a width of 100vw, but when I test it the width and margins of the media query are used even on mobile devices.
Can anybody see where I have gone wrong?
**ADDED AS REQUESTED
<meta charset="utf-8">
<title>NC Commodities Conference of Soybeans, Corn, Small Grains, and Cotton Producers</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
You have to change min-width propety to max-width.
#media only screen and (max-width: 768px) {
.content {
width: 70vw;
margin-left: 15vw;
margin-right: auto;
margin-top: 15vh;
margin-bottom: 15vh;
background-color: white;
min-height: 80vh;
padding: 0;
}
}
This max-width propety means, is “If [device width] is greater than or equal to 768px(accordingy to the example), then do {…}”.
#media only screen and (min-width: 768px)
this min-width implies here as,“If [device width] is greater than or equal to 768px, then do {…}”
Can you check your link tags at html file which you connect bootstrap.css and your.css to project?. You should link your.css at the end comparing the other css files.
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="your.css">
Simple one probably. I've made a webpage and now need it to be responsive to a mobile at 375px;
In the html I have added:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
My two columns are named in the html as follows:
#columnleft {
float: left;
width: 50%;
text-align: center;
background-color: #E8F8F5;
}
#columnright {
float: right;
width: 50%;
text-align: center;
background-color: #F4ECF7;
}
<div id="columnleft"> ..... </div>
<div id="columnright"> ..... </div>
I know i need to make a media query like this
#media screen and (max-width: 375 px)
But nothing is working. The largest size is 1024 px only these two sizes matter for this project. Nothing in between. I need the two columns to stack up on top of each other rather than side by side
Any advice much appreciated, thanks
make their width 100%
#media only screen and (max-width: 357px) {
#columnleft, #columnright {
width: 100%;
}
}
I have two logos: one for small screens and one for large ones.
Rather than different resolutions of the same image, these are two very different .png files and thus I can not use a scaling function. In my attempt to use them, I created the following media queries in a .jsp page with the purpose of editing a div box in order to show the files as background-images:
<style>
<meta name="viewport" content="width=device-width, initial-scale=1">
#media (min-width: 1200px) {
.zachery_div {
background: url(/assets/img/LargeLogo.png);
width: 764px;
height: 76px;
float: right;
}
}
#media (max-width: 1199px) {
.zachery_div {
background: url(/assets/img/SmallLogo.png);
width: 262px;
height: 76px;
float: right;
}
}
</style>
However, this only gives me the smaller logo when the width of the window is below 1199px.
If I expand the window to 1200px or above I receive nothing.
Both images are valid because swapping their position allows me to call either one, but never both.
Can any of you tell me what is wrong with my code?
When using mobile first approach (min-width) the smaller values come first, so your code would be:
.zachery_div {
height: 76px;
float: right;
}
#media (max-width: 1199px) {
.zachery_div {
background: url(/assets/img/SmallLogo.png);
width: 262px;
}
}
#media (min-width: 1200px) {
.zachery_div {
background: url(/assets/img/LargeLogo.png);
width: 764px;
}
}
<meta name="viewport" content="width=device-width, initial-scale=1">
Note that meta tag shouldn't be inside style tag. but inside head before style
And since you had repeated properties, I put them outside of #media as they are "standard" across the code
This media query seems to work when I resize the viewport window on my browser, but when I launch the site on a smartphone it looks zoomed in. Once I zoom out it looks okay, but when it loads it looks zoomed in...so I can only assume that something isn't breaking correctly.
Here's what I have in my meta tag:
<meta name="viewport" content="width=device-width, minimum-scale=1.0,maximum-scale=1.0">
And here is the first media query that I have in my CSS: The default body size of the document (when being viewed on a web browser on a computer) is 1200px.
#media screen and (min-width:481px) and (max-width:800px){
body {
width:800px;
}
.container {
width: 100%;
margin: auto;
background-image:url("img/background.jpg");
}
Any ideas as to why this may not be working?
EDIT:
I also have media queries for smaller viewport sizes that I'm adding to my original post. So it should launch on a smartphone, right?
#media only screen and (min-width:375px) and (max-width:667){
body {
width:480px;
margin: 0 auto;
}
.container {
width: 100%;
margin: auto;
background-image:url("img/background.jpg");
}
#logo {
color: white;
margin: 0 auto;
padding:0px;
text-transform:uppercase;
letter-spacing: 6px;
padding-top:110px;
font-size: 13px;
}
Try using:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
instead of your tag.
https://alwaystwisted.com/articles/2013-01-10-dont-do-this-in-responsive-web-development
I have a css file that looks like this:
#foo{
width: 35%;
height: 380px;
}
#media only screen and (max-device-width: 480px) {
#foo{
width: 100%;
height: 100%;
}
}
When I run the html from a mobile browser it's not displaying in full screen, any idea what needs to be modified? Ive tried Safari and Chrome and neither seem to apply the changes on the mobile device.
Make sure the meta viewport tag is set with width=device-width:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
The only thing i can think of is that the device you're testing on actually has a screen larger then 480px.
Testing your code in a browser by making it smaller on my laptop without "device-" works.
#foo{
width: 35%;
height: 380px;
}
#media only screen and (max-width: 480px) {
#foo{
width: 100%;
height: 100%;
}
}