I have been searching around for this subject but I keep finding those really really long articles and I'm not even sure if they are relevant for my issue so I'm asking here :)
I'm creating a mobile website and there is something weird with the images:
lets say my image is 200x100 pixels, and I'm using the following code:
<img src="img/my_img.png" width="200" height="100" />
or:
#myImg {
width: 200px;
height: 100px;
background: url(img/my_img.png);
}
when I open my website on desktop it will look fine, but when I check it on my mobile the image has really bad quality, seems like its stretching it.
i don't know if it has anything to do with my html code, but maybe its my viewport?
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0" />
Is the device you're using a retina device? If so, you will need to create a retina image(400px/200px) and then set the width/height to 200px/100px in the CSS.
I have just answered another question similar to this, in regards to the images I have been having the exact same problem.
I am pleased to say I have now managed to find a solution that works perfectly
Firstly when creating the images make them (if possible) 4x bigger than you need them. So that they are super high res.
Then when you are adding the image into your HTML, define the height and width of what you want the image to actually be.
For example if you wanted an image to view 100px x 100px create the image at 400px x 400px. Then define the image height and width within the img tag.
The image will keep the resolution and the DPI but literally just be smaller.
Yeay! We have an image that renders perfectly on all devices!
I hope this helps my friend!
Also watch out if you're using WordPress sometimes it automatically resizes images for you and renders those instead,
Related
The website that I'm making has an image that I am using as the main logo, and I'm trying to adjust the website for phones, computers, and anything else that can be used. The code does work but it stretches the image wider or taller depending on the screen.
I feel like there must be a way around this.
Another question relative to this is how would I make a box on top of the CSS background I already have. I tried using margins and borders but I can't seem to figure out how to fill them in (hopefully I can link it right)
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<img src="/logo.png"
width="400"
height="125"
style="width:100%;"
style="hight:auto;"/>
You might want to take at object-fit.
In particular, object-fit: cover; might be what you need. It will maintain the aspect ratio of the image and make sure it always covers the content box. The tradeoff is that parts of the image may be cropped and the image will get scaled to achieve this.
I have taken over a website for a company and when it was handed to me, there was quite a bit of work to get it where it is now. Some of the stuff in the site, the owners want to keep, some they allow me to change. One thing I am trying to figure out right now is how to get the mobile version to line up with the desktop version. It seems like in portrait mode, the container width is too small; there is space to the right and some images overlap. I have tried the recommendations in other threads that seemed to be asking the same question, but nothing worked so I thought I would post my own question in case I am changing the wrong code.
I added:
<meta name="viewport" content="width=device-width, initial-scale=1">
and looked for pretty much any "width" in the css, but to no avail. What else am I missing?
Here is the site:
http://leisurelandrvcenter.com/
specifically the "Inventory" page:
http://leisurelandrvcenter.com/inventory/
-Disclaimer-
This seems to only happen on certain devices and only in portrait mode. Landscape mode works fine on the devices checked (android only).
Thanks in advance!
if you want to make it responsive you have to get rid of all the fixed width there are on the css, for example:
if you want to make the inventory page responsive you'll have to edit the following css:
#layout-content {
width: 1285px;
}
to this:
#layout-content {
max-width: 1285px;
width: auto;
}
Then in order to resize the images (for example the logo) you'll have to set the following css:
img { max-width:100%; width:auto; }
Instead of using the img tag you should use the css class or ID of the logo or any image you want to make responsive.
The images are too large for small screens. You could add mediaqueries to your css that set the width of images to 100% for smaller screens. (And anyway use css to set img sizes, instead of using img attributes in the html)
I'm trying to optimise my website for mobiles and small screens. The website looks perfect on anything 1920x1080 and above. I'm using bootstrap and I can't figure out what's wrong with my code that is preventing the mobile scaling from working.
It seems my background 's arent scaling to the text - that is, these 's appear to be completely static and the text can just overflow past them and stack onto other parts of the page. What I want to happen is for the background colour, (white, grey, dark grey) to extend to the regions of the text on the mobile view.
Thank you in advance.
On every div you height and % (percentage). Take all those out and your site will be ok.
I also noticed the carousel is very slow at loading the pictures. If you compress each to about 200k or less it will load faster and still keep the resolution ok.
you have a <meta name="viewport" content="width=device-width, initial-scale=0.5">
i suggest making this to .8 or .9 or 1
the navbar menu does not adapt to mobile screens. Check the link below to see how a boostrap nav menu should be like and follow the example to create one
http://getbootstrap.com/examples/navbar/
Sections like these should have the same amount of text. So shorten the middle one out a bit, but make all sections equal to the amount of text and lines (example 3 lines or 4 lines of text) so they are responsive. A workaround will be to give a min-height to a section but i dont recomend doing that
Also the heading learning and problem solving is too long. You can change that to Learning
use the viewport meta tag, put it in your head
<meta name="viewport" content="width=device-width, initial-scale=1">
For font sizes, i prefer to use vh(viewport height) & vw(viewport width) to control sizes. That way the size will be proportional to the device view.
Be wary though. the viewport tag may cause rendering issues with height. For this, i use vh.
also, if the page is meant to fit to the screen, it may be a good idea to use "user-scalable=no" in your viewport tag. But only do that if you wish for end users to not zoom in & out.
I'm trying to create a site using this theme - http://ironsummitmedia.github.io/startbootstrap-4-col-portfolio/
It's already responsive, but instead of images, I'd like them to be rectangle boxes that are links, and which, depending upon the size of the user's browser window, will always expand or contract to fit the browser window, with about 20px margin in between each one, evenly-spaced throughout.
Have no knowledge of Javascript, but am wondering if this can be done with CSS.
What I'm wanting is kind of like Chris Coyier's example here - https://css-tricks.com/examples/SeamlessResponsivePhotoGrid/, but need each rectangle to be evenly spaced and sized in the theme preview above.
Thanks for your help!
Oh, and if anyone knows how to Wordpressify it, that would be incredible!
by the looks of it, the site you provided uses the meta veiwport tag.
<meta name="viewport" content="width=device-width, initial-scale=1" >
But the tag only works well if your CSS sizes are %'s instead of pixels. (including font sizes)
It can do by using css3 calc() you can change size of you images parent div using calc dynamically
change your
<div class="col-md-3 portfolio-item">
to <div class="asd">
and add style like this
.asd{
width: calc(80%/4);
float:left;
margin:2%;
}
Live Demo
I'm working on a website for a small festival for a friend, but I'm trying to work with mobile browsing WITHOUT fluid layouts, ect. It's just a website that I want to use the classic viewport script so it will be at the minimum zoom when a mobile device comes to it.
HTML
<meta name="viewport" content="450, initial-scale=1, maximum-scale=1">
That's what I have now however I have tried this way as well.
<meta name="viewport" content="width=device-width,initial-scale=1">
Yet every single time I come to the site on my mobile device it's zoomed in so you can only see the logo.
What am I doing wrong?
Also there are 2 other things I've noticed when viewing on the phone.
The footer background colour doesn't stretch all the way across (and it's no different if I have device-width OR width="XXX"). Yet the width of my footer is 100%. I don't understand what is happening here.
And I'm trying to put padding, or a space to the left and right of the content so the website isn't resting right up on the side of the window. I want to have space to the left and right. I've tried to put this on the html tag but it only applies it to the left side??
I've gone to https://developer.mozilla.org/en/Mobile/Viewport_meta_tag & http://www.quirksmode.org/mobile/viewports2.html and other websites and can't understand what might be happening in any of these cases.
Any help, advice, direction or guidance is VERY much appreciated.
To fix the background issue try adding this:
body {
min-width: 1024px;
}
You have the top sections of the page inside a container with an explicit width (960px), which is why you aren't having an issue with them. The footer however is on its own without an explicit width set. You could also just enclose it in the same div with the id 'container' you used for the rest of the page.
This should also fix your padding issue. Make sure you are adding it to the content containers. For example:
#main {
padding: 0 1.5em;
}
As for the zooming issue, I am not seeing it on an iPad or an iPhone. Since you are not doing any sort of fluidity or responsiveness this is what you should be using. What initial-scale=1 is doing is zooming it into to its actual width, not fitting it to your screen.
<meta name="viewport" content="width=device-width"/>
You might want to check out this question: Android ignores maximum-scale when using fixed-width viewport meta-tag for the Android issue. I don't have an Android device handy to test so I don't want to give you incorrect info on that part.