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
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">
I am using media queries to change my website look at different sizes...
this is my HTML code
<meta name="viewport" content="width=device-width, initial-
scale=1">
<link rel="stylesheet" media="screen and (max-width: 600px)"
href="styles/style.css"/>
AND my CSS code
#media screen and (max-widht: 650px) {
.projects-grid{
float: none;
width: 100%;
grid-template-columns: 100%;
}
}
#media screen and (max-width: 650px) {
.projects-grid{
float: none;
width: 100%;
grid-template-columns: 100%;
}
}
you have a typo in your media query you wrote widht instead of width
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'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 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