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">
Related
Below is the HTML tag
<div class="logo">
<img src="{% static 'img/sunil.png' %}" id="logo" alt="">
</div>
STYLE.CSS
what i have done in css file is below:
#logo {
height: 60px;
width: 120px;
}
#media only screen and (max-width: 500px) {
.logo {
height: 20px;
width: 60px;
}
}
I tried to change the image size using media queries but it is not working.
style.css is connected in main file because when I use #logo and changed height and width then its working but when I try in media queries then it's not working.
It seems like your media query is not working. Firstly, make sure you have in your head section:
<meta name="viewport" content="width=device-width, initial-scale=1">
Also, try removing only from your media query:
#logo {
height: 60px;
width: 120px;
}
#media screen and (max-width: 500px) {
#logo {
height: 20px;
width: 60px;
}
}
Note you use logo id only once in a page. Here you can see the difference between screen and only screen.
make sure you have meta tag in html's Head section and check if you're targetting div with class .logo or img with id #logo
<meta charset="utf-8">
`<meta name="viewport" content="width=device-width, initial-scale=1">`
In your code "logo" is an id.
<img src="{% static 'img/sunil.png' %}" id="logo" alt="">
but here,
#media only screen and (max-width: 500px) {
.logo {
height: 20px;
width: 60px;
}
}
you defined as a class.
try changing the .logo with #logo
I looked on every thread and I tried every possible solution to no avail. It just doesn't work on any browser...
HTML
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"/>
</head>
<body>
<div class="bg">
</div>
</body>
CSS:
#media only screen and (max-width: 1200){
.bg{
background-color: green;
}
}
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
.bg{
background-color: black;
height: 100vh;
}
Any suggestions?
You have 2 problems that are preventing it from working:
You need to specify the unit (e.g. px) in the (max-width: 1200px) - otherwise it doesn't recognise the breakpoint
You need to include the media query after the default css for .bg. Because you are including the media query before .bg{background-color: black;...}, this is overriding the CSS rule in the media query that set is to green.
See this in a working snippet (Click "Expand Snippet" to see it in fullscreen with a black background):
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.bg {
background-color: black;
height: 100vh;
}
#media only screen and (max-width: 1200px) {
.bg {
background-color: green;
}
}
<div class="bg">
</div>
You should be using min-width in your media queries and apply them using mobile first approach. It means first you apply default styles which will apply to any screen if there are no media queries. Then you reset styles for larger screen sizes. The default styles then only apply to smaller screens.
Example:
/* Default style */
.sample-class {
color: #ff0000;
}
/* Reset style for screen sizes that are 768px or higher */
#media screen and (min-width: 768px) {
.sample-class {
color: #777777;
}
}
Do make sure that you are implementing styles in the order above.
I have a media query which shoulda change the size of a div from 100% to a fixed 2000px. They are in different style sheets.
In the header contact.css is ABOVE styles.css
Here is an image of the console not seeing the rule, it doesn't even show it with a strike through: https://gyazo.com/dd140a95ed8a7d3454f5568a86f49bdc
(In this image, the browser size has been reduced to less than 700px)
contact.html:
<link rel="stylesheet" href="css/contact.css">
<link rel="stylesheet" href="css/styles.css">
contact.css:
#PageC {
position: absolute;
z-index: 3;
width: 100%;
height: 100%;
}
Media query in styles.css:
#media screen and (max-width: 700px) {
#pageC {
height: 2000px;
margin-top: 120px;
}
}
Selectors #pageC and #PageC are not the same.
Fix it and it will work for you as expected.
#media screen and (max-width: 700px) {
#PageC {
height: 2000px;
margin-top: 120px;
}
}
First of all, in contact.css you use completely different selector #PageC and in styles.css #pageC. It doesn't work because of case-sensivity of selectors.
Secondly, I suggest you to put all style for #pageC in one place, because it helps to optimize your work.
For example, page.css can look so:
#pageC {
position: absolute;
z-index: 3;
width: 100%;
height: 100%;
}
#media screen and (max-width: 700px) {
#pageC {
height: 2000px;
margin-top: 120px;
}
}
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;
}
}
I have some CSS that makes the whole site content have a marging to the left and right with 5em.
.content {
margin-left: 5em;
margin-right: 5em;
}
However, I want the margin to NOT work(not have a margin) or only have a margin with 1em when I enter the site on a mobile phone or touchpad. I have tried the following code but nothing happens. More specificly, I want this to be activated, and have no margin or only margin on 1em, on the screens that uses the initial scale I have set on every page. And I suppose that its only phones and pads.
#media screen
{
.content {
margin-left: 1em;
margin-right: 1em;
}
}
#media print
{
.content {
margin-left: 1em;
margin-right: 1em;
}
}
#media screen,print
{
.content {
margin-left: 1em;
margin-right: 1em;
}
}
You can use a media query with a specified width to achieve that :
#media (max-width: 640px){
.content {
margin-left: 1em;
margin-right: 1em;
}
}
See here common device width to choose the width you want : http://mydevice.io/devices/
Also don't forget to include the viewport meta in your <head></head> tag to make it works on your phone :
...
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
...
The syntax that you are using for media query is incorrect.
One must specify the width at which the media query will trigger in other words the width on the screen at which the code inside the media queries that will overwrite the default code.
the syntax for the #media property is
`#media not|only *mediatype* and (*media feature*) {
CSS-Code;
}`
So you must use this code to achieve the desired results :
#media (max-width: 667px){
.content {
margin-left: 1em;
margin-right: 1em;
}
}