I want to control the size of my logo using media query.
The original width of my logo is 210px.
I want it to be 166px when the screen width is greater than 56.865em and same when it is less than this width, i.e., for mobile site.
I have written following code for this:
#media only screen and (min-width: 56.875em){
.site-branding img{
max-width: 166px;
}
}
#media only screen and (max-width: 56.875em){
.site-branding img {
max-width: 166px !important;
}
}
Only the first code block is working. Why isn't second working? (When the screen width is decreased, the width of logo becomes 210px again).
Is there any rule that you can't use both min and max media-queries to control same element?
The max-width rule won't work because it is overridden by the min-width since both have same value.
an easy approach, instead of doing 2 media queries is simply setting the logo's width in the general CSS and then apply a media query:
via non-mobile approach using the max-width
or
via the mobile first approach using min-width
Option with max-width
.logo img {
width: 210px
}
#media (max-width: 56.865em) {
.logo img {
width: 166px
}
}
<div class="logo">
<img src="//lorempixel.com/300/300">
</div>
Option with min-width
.logo img {
width: 166px
}
#media (min-width: 56.865em) {
.logo img {
width: 210px
}
}
<div class="logo">
<img src="//lorempixel.com/300/300">
</div>
UPDATE
First, I want the logo size 166px all the time.
So if you want after all is to have the logo's width at 166px all the time, meaning you want to change the current 210px to 166px
Then you don't need media queries. Assuming you are changing a custom CSS file and you can't/want to change the Base CSS file (which contains the width:210px) all you need is to be more specific.
See more about CSS specificity in MDN and in W3C Specs
/* emulating Base CSS */
.logo img {
width: 210px
}
/*being more specific */
.header .logo img {
width: 166px
}
<div class="header">
<div class="logo">
<img src="//lorempixel.com/300/300">
</div>
</div>
This drove me crazy but I found that commenting out text before #media will block the statement.
<!-- DO NOT COMMENT LIKE THIS BEFORE #media -->
/* USE THIS Comment version */
Hope it helps someone out!
Related
I have created a website and there is an image (640x640px) but on mobile you have to side scroll in order to see the full picture. Does anyone know how I could change the size on mobile but make it stay the same on desktop?
this is what i have so far
<pre>
<div>
<img style="object-fit: scale-down;" src="gifs/preview.gif">
</div>
You want to use:
img {
max-width: 100%;
}
so what you can do fir this is to give the image a classname and then use that classname within a #media query
#media only screen and (max-width: 600px) {
.classname {
width: 200px;
height: 200px;
background-size: 100% 100%;
}
}
and then give it whatever size you feel works best for that size you want to achieve
try incorporating #media queries into you css file. It will look as follows:
#media only screen and (max-width: 600px) {
img {
width: 50%;
}
}
So in the above code we are creating an at media query which will trigger when the screen is less than or equal to 600px, then the following will happen, which in this case, is it will take only 50% of the parent div.
Here is a resource if you still do not understand: https://www.w3schools.com/css/css_rwd_mediaqueries.asp
Hope this makes sense :D
I have a web project, how do I make the images on my website responsive in any display? Will this is my code is produce an error?
html code
<img src="image/Al-Khawarizmi.jpeg" class="img-load">
css code
#media screen and (max-width: 750px) {
.img-load {
width: 100%;
height: auto;
}
}
You have a few options when it comes to making your image responsive.
With the current settings you have of width: 100% and height: auto, your image is already responsive without the media query.
Your image is not longer responsive if you start using px as a unit of measure for your height and width.
You do haven't need to #media, if you want image width to cover the entire page width, in any device. only:
HTML:
<img src="image/Al-Khawarizmi.jpeg" class="img-load">
CSS:
.img-load{
width:100%;
}
You must use #media, only when you want your image to have different widths in any device.
For example, if you want the width of an image to be 50% on the large screen, and 100% on the smaller screen, you can set:
CSS:
.img-load{
height: auto;
}
#media screen and (max-width: 750px) {
.img-load{
width:100%;
}
}
#media screen and (max-width: 1200px) {
.img-load{
width:50%;
}
}
Here is a link to the codepen for the code that I am working on. I am trying to get it so that if the device width is less than 540px, the width of the wrapper goes from 33.33% to 100%, however it doesn't seem to be doing so.
My media query is as follows:
#media only screen and (max-width: 540px) {
#wrapper {
width: 100%;
}
}
My normal css for the wrapper is as follows:
#wrapper {
width: 33.3%;
margin: 0 auto;
position: relative;
}
You have to put that media query BELOW the other rules in the stylesheet. The way you have it now (i.e. media query at the beginning of your stylesheet) it's overwritten by the general rule (containing width: 33.3%;) which follows below it.
https://codepen.io/anon/pen/GyPRVG
New to media queries. But I think I've missed the boat somewhere.
Suppose I have a topBar like the one in the snippit below, made up of a topBar container, fixed width, and a list, and the entire unit is floated to the right. I would like it so as long as the screen is resized until, let's say 1000px, for the topBar to shrink along with the screen as it is resized. When it hits 1000px something else will happen, but we can worry about that later.
For this to work, do I need to set queries for both the topBar container and topBar fixed width, or just the container? Also, is it a Max width or a min width that I should be targeting for the overall screen?
#top-menu
{
width: 100%;
background-color: white;
height: 40px;
color: #00a5b5
}
#topMenu-fixedWidth
{
height: 80px;
width: 1156px;
color: #00a5b5;
margin: 0 auto;
}
#topMenu-fixedWidth ul
{
list-style: none;
float: right;
margin-right: 5px;
}
#topMenu-fixedWidth ul:nth-child(4)
{
margin-right: 0;
}
#topMenu-fixedWidth ul li
{
float: left;
margin: 10px;
<div id="top-menu">
<div id="topMenu-fixedWidth">
<ul>
<li class="topMenuText">Partners</li>
<li class="topMenuText">Careers</li>
<li class="topMenuText">Language</li>
<li class="topMenuText">Login</li>
</ul>
</div>
</div>
Since you want content to re-size along with a re-sizing screen, you should use viewport percentage lengths, such as vh and vw. Elements will be sized relative to the viewport.
Also, is it a Max width or a min width that I should be targeting for the overall screen?
Either. Doesn't really matter, unless you have a specific need.
#media ( min-width: 1000px ) {
/* executes code here when the screen is 1000px or more */
}
#media ( max-width: 1000px ) {
/* executes code here when the screen is 1000px or less */
}
More information:
Max-Width vs. Min-Width
Common breakpoints for media queries on a responsive site
You have your base css which applies to all screen sizes. Then beyond that, you just set whatever css classes you want to change when the screen size changes. For example if you want remove the float below 1000px, you would do the following:
#topbar {float: right;}
#media screen and (max-width: 1000px) {
#topbar {float: none;}
}
Your #top-menu already has a width of 100% so that will resize no matter what. Your #topMenu-fixedWidth will need to be inside of a media query like so:
#media screen and (min-width 1000px){
#topMenu-fixedWidth
{
height: 80px;
width: 1156px;
}
}
*note: You only need to include the styles you want to change within the media query.
I need the following:
emtpy div with no content
background image set to the div the
background image to be fluid/responsive on re-size I cannot set fixed
dimensions on the div
Everything I try fails to force the div open to support the size of the background image. Any help is greatly appreciated...
http://www.everymountain.us/
<header id="header">
<div class="wrapper">
<div class="inner">
<div class="top_banner"></div>
</div>
<div class="clear"></div>
</div>
</header>
.front #header .top_banner { background: url('images/bg_front.jpg') no-repeat; background-size: cover; }
The way to lock a height's aspect ratio to it's fluid width is to use padding-top or padding-bottom percentage. This is because all padding percentages are of the the element container's width. Your background image is 960 x 520, so the height is 54.166666666667%.
html
<div class="top_banner"></div>
css
.top_banner {
background-image: url('images/bg_front.jpg');
background-size: 100%;
width: 100%;
padding-top: 54.166666666667%;
height: 0;
}
Example: http://jsfiddle.net/SsTZe/156/
Essentially the same question: CSS fluid image replacement?
You can handle it after applying CSS
#DivName{
background-size: auto auto;
}
here first auto is for width and second is for height
Since this is a top google result for creating fluid-height divs in general (not just empty ones like the question specifies), I wanted to leave a CSS Calc solution that lets you put content into the div (the padding trick forces it to be empty):
.my-div {
background: #ccc url(https://link-to-image/img.jpg) no-repeat 50% 0;
background-size: 100% auto;
width: calc(100vw - 350px);
height: calc((100vw - 350px) * 0.468795); /* replace the decimal with your height / width aspect ratio */
}
Try to use medie queries in your CSS for different screen sizes to handle different fixed heights.
For example:
#media (min-width: 1200px) {
div { height: 3em; }
}
#media (min-width: 768px) and (max-width: 979px) {
div { height: 2em; }
}
#media (max-width: 767px) {
div { height: 1.2em; }
}
#media (max-width: 480px) {
div { height: 1em; }
}
etc. what you need to customize. You can leave the div width 100% to fit for all screen and the background-size:cover. You can also make different size backgrounds (diff. files) for each screen sizes to give less size to your website for mobile or tablet devices.