I got a problem with some icons (they are anchor links) on mobile devices. If I use the google toggle bar on the desktop version, everything looks fine, when I surf the page on the smartphone, the icon looks slightly stretched.
There might be some problems with the css, but I can't manage to find the problem. I have tried several times to change the height and width, but it does not seem to be working. Anybody got some idea?
Here's the html:
<img id="icon" style="max-width:100%" "max-height: 100%">
here's the css and the media queries:
#media only screen and (min-width: 300px) and (max-width:650px) {
#icon {
max-width:100%;
max-height:100%;
}
Here you made 1 html error, 1 CSS error and 1 CSS priority that you must not know. But you should also share the container of your a element.
HTML ERROR
You wrote: style="max-width:100%" "max-height: 100%"
<img id="icon" style="max-width:100%" "max-height: 100%">
But " is used to open or close a property. So the way you wrote it, max-height wont ever be taken because style is closed max-width. you should write it like:
<img id="icon" style="max-width:100%; max-height: 100%;">
CSS ERROR
Based on your CSS code, mediaquery is not closed. But it should.
#media only screen and (min-width: 300px) and (max-width:650px) {
#icon {
max-width:100%;
max-height:100%;
}
}
PRIORITY
When you are setting style property inline (directly in html), it has the priority on css setting. Except if you add !important after your css.
So to solve your problem, you have 2 solution. The snippet wont show anything because I dont have your icon. But it is to show the code clearly.
1st Solution with inline CSS:
#media only screen and (min-width: 300px) and (max-width:650px) {
#icon {
max-width:100% !important;
max-height:100% !important;
}
}
<img id="icon" style="max-width:100%; max-height: 100%;">
Solution 2 with everything in css:
#icon {
max-width:100%;
max-height:100%;
}
#media only screen and (min-width: 300px) and (max-width:650px) {
#icon {
max-width:100%;
max-height:100%;
}
}
<img id="icon">
But this code do not make any sense as you are trying to apply the same max-width and max-height no matter the screen width, it should just be like, based on what you shared:
#icon {
max-width:100%;
max-height:100%;
}
<img id="icon">
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
Is there a way to have an image set to a specific size while using a desktop browser, but have it automatically resize to your screen using a mobile device?
I currently just have the image hardcoded to a specific size in HTML.
<img src="URL" alt="Cool Link" style="width:720px;height:100px;border:0;">
I'm open to trying HTML/CSS/JS etc. Thanks!
You sholud add class attribute to img tag and then add below css for image
<img src="link" alt="Cool Link" class="anyofimgclass">
.anyofimgclass{
display: block;
max-width: 100%;
height: auto;
}
As Arti Rana said, you should create a class first.
Then you can use #media attribute, to set style for specific max-width. You can check this out here:
CSS #media Rule
P.S. I recommend you to use containers (div) in order to create classes.
.box {
display:inline-block;
width:100%;
text-align:center;
}
img {
display:inline-block;
width:768px;
margin:0 auto;
}
#media only screen and (max-width: 767px) {
img {
width:100%;
}
}
<div class="box">
<img src="https://www.myhappyenglish.com/x9walos9f/uploads/2013/05/placeholder.png">
</div>
https://jsfiddle.net/Sampath_Madhuranga/6t2snwa3/6/
This works fine..Try this
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!
On a full sized screen, I have three images in a column format that should, all together, take up the entire screen. Right now, my code works, in that the the images take up the width of the screen and on screen less than 600px, the images stack one top of one another. But the issue is that the images are not taking up the entire width. The code is below and I am using a sample pic that is huge, but it still doesn't show the entire height of the image.
EDITED TO TAKE OUT MY ORIGINAL CODE
Okay, per comments, I have changed the code to look: http://jsfiddle.net/zx11x99x/
.wrapper img{
float:left;
width:100%;
}
#media screen and (min-width: 600px) {
.wrapper img{
width:33%;
}
}
<div class="wrapper">
<img src="https://recodetech.files.wordpress.com/2014/05/early-vehicle-lores.jpg?quality=80&strip=info" alt="">
<img src="https://recodetech.files.wordpress.com/2014/05/early-vehicle-lores.jpg?quality=80&strip=info" alt="">
<img src="https://recodetech.files.wordpress.com/2014/05/early-vehicle-lores.jpg?quality=80&strip=info" alt="">
</div>
The problem is still that the images are not full screen, which I cannot seem to figure out.
In short, I am trying to go for this, but with the columns stacking on mobile
http://jsfiddle.net/9udg7qxg/
example example example example example example example example example http://jsfiddle.net/zx11x99x/
code
Updated:
* { padding: 0; margin: 0; }
#media (max-width:1400px) and (min-width:600px) {
.wrapper > img{
float:left;
max-width:33%;
}
}
#media (max-width:600px) and (min-width:100px) {
.wrapper > img{
width:100%;
display:block;
}
}
JSFIDDLE
Just also make sure you use the correct Meta tag.
I had a hard time to fix it. Maybe I am just very noob on css.
Basically, I want the icon to visible only in Mobile version of the site.
in above 767px I put this code to make i hidden.
.neighbourhood-img img {display:none;}
My question is, how can I make it visible in below 767px width..
Thanks!
hey check out this css
#media screen and (min-width: 768px) {
.neighbourhood-img img {display:none;}
}
#media screen and (max-width: 767px) {
.neighbourhood-img img {display:block;}
}
What you need is called media queries. Try with:
#media screen and (min-width: 768px) {
.neighbourhood-img img {display:none;}
}
It will be hidden when the width of the screen is at least 768px
You can read more about media queries here:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
You can use media queries available in CSS to define the styles which meet certain conditions, in you case the condition will be screen width.
Use Css Class:
.neighbourhood-img img
{
display:block;
}
I think I understand what you're asking.
If you only want it to visible on mobile version then you could do the following:
Make a new CSS rule:
#media only screen and (max-width: 767px) {
.m-show {
display: block !important;
max-height: none !important;
overflow: visible !important;
}
}
Then wrap your icon in a div tag as below, with the styling to hide it (but make its class the m-show class):
<div style="display: none; max-height: 0; overflow: hidden" class="m-show">
Your hidden content here...
</div>
This will hide it if it isn't in that max width of 767, otherwise it will show it. Hope this makes sense. I would also suggest making that inline styling in the div tag a separate CSS class (just because I don't like inline styling).