Considering how many screen sizes for Android, I am thinking should I put an image for toolbar and splash image or responsive background css image.
I am developing a mobile web-site.
CSS:
Good for multiple screens, so it can be responsive
Hard to develop especially if a Photoshop guy can do that within 10-15 mins :)
IMAGE
Hard to create a responsive image? Correct me if I'm wrong
Fast development.
If you want a responsive image, you could simply give the element a width of 100%. You might also need to add height:auto in order to preserve the aspect ratio of the image.
EXAMPLE HERE
img {
height:auto;
width:100%;
}
Related
On my site, the logo is up to search block when I try to view the site from tablets and phones, but from a PC it is OK. I included a photo to show you what I mean. Can anyone help me fix this?
As look from tablets and phones:
This is happening because your image width and height are predefined. This means that no matter what device you're on, the image will keep to the defined width/height.
You will need to make your image responsive.
You can do this by wrapping the image in a div that's got a defined width/height (perhaps a bootstrap grid column) and then apply Bootstrap's `.img-responsive' class on your image.
I'd provide a code example once you post your code & the position of where the image needs to be. (see comments on your main thread)
Try add .img-responsive class to the tag in your theme files.
Hi I am using corner stone to edit my web site, in wordpress using X theme.
Everything looks great and find on all screen sizes except for those 1300px width and larger.
ON my front page I use background images on two separate sections and set the padding to a large amount of pxs to fill out. However on larger screen sizes the background images look very small.
To fix this I tried to use custom css
#media (min-width:1300px){
.custom { padding:500px;
}
}
Yet nothing changes, any suggestions to fix this issue?
Thanks
On your wordpress dashboard go to Appearance > Customize > Layout & Design.
For Site Layout and Content Layout choose Full Width. Under Site Max Width, drag the bar to the far right. I believe the max is 1500px. This should solve your problem.
I am working on blog at blogger and it has got a responsive template. When I see logo on my blog on the computer it looks fine but when I go to iPhone it is kind of blurred and I don't know what is the reason for that.
I tried to edit logo and change it for different one but the result is the same...
Link to my blog is: www.5minLunchBox.blogspot.com
Does anyone have an idea how to fix it?
Thank you!
Your natural width is 220px width. But your mobile viewport width exceeds that amount to 320px to 480px depending on the mobile device. Not to mention, you are using a .jpg image which is highly pixelated.
SOLUTIONS
Familiarize yourself with .svg technology. Using an SVG will allow you to manipulate the image at all widths and make use of your max-width:100%;.
Use a larger image (no smaller than 480px) this way, you can still resize down without losing resolution, and not have a need to re-size up, which is your problem here. You are expanding .jpg pixels
Once you have added a larger logo, hopefully a .png at least, but preferably an .svg, do the following:
#media only screen and (-webkit-min-device-pixel-ratio: 1) {
.widget iframe, .widget img {
width:100%;
max-width: 320px;
}
}
This happens because the real logo jpg dimensions are: 200x90 pixels. On the desktop version set the width to 200px but the smartphone version set the width to 100%. For this, on an iPhone 6, the logo width become 375px and the image appears blurred and pixelated (on iPad become 768px).
You could augment the real size of the jpg logo, but the file size could be too big. If you can change the image format you could convert the logo to svg.
I want all images for a mobile site to be 640px wide, based on iPhone screen size.
All images should be the full width of the screen when shown img { width: 100%; height: auto; }.
For the images that are smaller than 640px wide, is it better to use the above CSS to scale them up, or should I use Photoshop or something to scale the actual image up? Does it even make a difference?
So does scaling up an image using CSS result in a better or worse image quality than using something like Photoshop to increase the size?
Scaling images up doesn't go well for the quality of said images, you need to sort out your priorities on this one. You can work on those images and increase the quality and size of those images in Photoshop so you don't lose any quality when resizing, but this will increase page loads or you could lose some quality, but improve page loads with smaller but more crappy images.
If you really want to target each device (computer vs mobile) perfectly you can use javascript to switch out the images. This can be done really easily using http://foundation.zurb.com/docs/components/interchange.html or similar libraries.
If the images are graphics or icons I might suggest just making them svgs and using those instead as they are crisp at a greater range of resolutions. If you go with this option its best to make their sizes multiples of two.
I've found StackOverflow extremely useful so thanks for any help in advance.
On http://test2.heyscout.com/, I'm wondering how to properly set up my background-image in my "hero div" for responsive web design. I've been playing around with numerous settings but I'd like it to:
stay in position consistently without jumping around due to browser size (for example, on the mobile phone, it gets misaligned or there's white space where there shouldn't be)
the 'Verify Anyone Offline' doesn't resize properly even though I set it in em
the button looks strange on a mobile device
What is the best practice for keeping the "hero div" in check? I'd surmise it'd have to do something with the min-height or perhaps fixing the dimensions of the actual image. Should I set the height of the hero div in percentage rather than pixels?
Also any advice on how to keep my "trimester div" fill up nicely the bottom 1/3 of the page consistently would be great- I'd imagine when the height of the browser is bigger than expected, it'd look strange. I've read that it's best to keep the height attribute alone for RWD but I'm wondering if there are any tricks to make sure it resizes properly.
Have you looked into Media Queries? Basically, they allow you to set specific CSS based on browser width (and height). This will allow you to control how your page looks at specific browser sizes.
Example - CSS at different widths:
#media screen and (max-width: 600px) {
/* add some CSS here for 600px maximum width*/
}
#media screen and (max-width: 960px) {
/* add some CSS here for 960px maximum width*/
}
To get the background image to always fill the div, use background-size: cover2 unless you need to support IE8.
If your font size doesn't look right across pc/tablet/handheld, try using media queries to set font sizes for specific resolutions.
I'm not sure how to help you with your button "looking strange", except to offer profuse sympathy.
In the future, try to keep your questions more focused. :)
give
background-size:contain;
and this may solve your problem, because it will auto adjust size by contain!