I'm currently having issues with the responsive actions on a site. I'm using the Oneengine theme (very good theme) and the "background" images I'm using aren't responsive when viewed on a device.
Can anyone point me in the right direction to make the images used for the background responsive? Here is the site I’m working on
http://www.jamiebull.co.uk/Meadows_site
When viewed in the chrome emulator for the iPhone 5 the site displays (Aside from the header logo) correctly , however this is not the case when actually being used on the device as it only displays a portion of the image rather than scaling it down. This is the case across mobile and tablet devices.
Can someone point me in the right direction on how to solve this please? I’ve tried bits of code and various plugins such as PB Responsive Image, but nothing seems to be affect it.
I've tried the code below in my stylesheet;
img {
border: 0 none;
max-width: 100%;
vertical-align: middle;
}
This only affects the images I’m using as backgrounds for the panels and the footer, images I have within the other panels and the footer seem to render correctly when viewed on smaller devices.
I'm still quite new to coding, so anything will help!
Related
I'm currently working on a website and I have one particular issue with responsiveness.
The website looked very good and resized appropriately when I changed the size of the browser window from maximum to minimum. However I did get an issue on mobile devices where the website was cut off at the right and the title text was overflowing. I managed to reproduce the issue in the browser as well by making the window as small as possible and then zooming in until I got a horizontal scroll bar. Scrolling all the way to the right then revealed the issue.
I tried to fix it for mobile devices by including the following code in my CSS:
#media(max-width: 700px) {
html,body {
width: 150%;
height: 200%;
margin: 0;
padding: 0;
overflow-x: hidden;
}
}
It did solve the overflow issue but now after initial loading the page on mobile is zoomed in and I have to double tap to reset the zoom. I was unable to find a solution for this issue to reset the zoom automatically.
Also shrinking the browser window on PC with this code in place cuts off the website at the right side when the media query is executed.
Here is the code together with a way to look at the issues. If you want to see the original issue you only need to delete the media query from the top of the CSS file.
https://codepen.io/lapierre-bernard-david/pen/NWqZMqd
I'm very new to web development so I'm pretty sure what I came up with is more of a hack than an actual solution. I'd be very happy about any advice.
As I've seen many people with a similar issue, I did include the often suggested viewport header of course, and I have no fixed width anywhere in my code.
Having trouble with the background images while scrolling on a mobile device. The images work fine while Inspecting the website and setting it to mobile view, but when I use an actual mobile device the images are zoomed in and blurry.
Im having trouble with the navigation too when Im on a page post.. I cant get back to the main page since the nav links are anchored to the main page in specific spots.
Any help would be amazing! Thanks
http://www.wearesettv.com/
As a relative beginner, I seem to be struggling to find the right balance between creating media queries based on content rather than specific devices.
I'm wrestling at the moment with a landing page that has a css background image covering the entire viewport. In order to ensure the image remains consistent (i.e. no cropping) across all mobile devices, I started writing device-based media queries that each load different versions of the image. By the time I'd created them for four different iPhones (portrait and landscape) alarm bells were going off.
Is there a better way to achieve what I'm trying to do or should I just accept that the image is going to look different from device to device?
All help gratefully received.
Steve
http://sixrevisions.com/css/responsive-background-image/
body {
background: url(background-photo.jpg) center center cover no-repeat fixed;
}
This should look relatively good across all devices.
I have a problem that I believe is a quick solution... I simply can't figure it out myself, however, and a quick run through search didn't help me either.
Basically, the only real issue I'm having I'd like to address is the logo (SERVICE FIRST) not shrinking down to fit inside of the width of the site in a mobile form. While the rest of the site responds fairly nicely (as nice as it usually gets) to the responsive web design, the header image doesn't so much as twitch, meaning it runs "off" the edge of the page.
My site is at www.test.servicefirstsvc.com
If you view it on a mobile device, or simply shrink your web broswer window to a phone size, you'll see the problem. Any help? I can paste relevant portions of the responsive CSS if needed.
Just give the img tag a max-width: 100%; via CSS.
You should add a height: auto; as well because of some weird issues with the Safari browser not paying attention to the aspect ratio of the image.
I've developed a responsive website, and just when I thought it was perfect and ready to launch, I found out that the images on the homepage are not displaying properly on iPhones (I developed the site while testing on an Android, so I was none the wiser about iPhone oddities until now). The images should be fitting into the width of the screen (I've set max-width: 100%; on them), but instead they are stretched and pixelated way beyond their actual resolution.
Curiously, images on any other page of the site display just fine. I thought the issue was rooted in the fact that the images on the homepage are actually set via a CSS background property, while images everywhere else are set in <img> tags in the HTML. So I commented out the "background" declarations in the CSS file and instead used <img> tags on the homepage, just like everywhere else. When I did that to the very first image, it displayed great. However, as soon as I switched the rest of the images to HTML, they all reverted back to the ugly that was present before.
My boss (who has access to an iPhone) sent me this video (apologies for it being out of focus, but you get the idea): https://www.youtube.com/watch?v=_vFJVZiBc3Q
The first four images he scrolls past ought to all fit above the fold, and you're only seeing the left ~1/10th of the actual image, that's how far it's stretched out.
I'm out of ideas here. Is there anything special I need to do for iPhones? With the <img> tag, these photos should be in the same format that the rest of the working images are in.
Thanks so much in advance!
As it turns out, it was a me-specific issue. Apologies for being vague above, I really had no idea what I should have been looking for when it came to iPhones. The images in question were contained in <div>s in which I specified a height in vh units. As a future reference for anyone reading this, you apparently shouldn't do that. Changing height to a percent unit fixed the issue, and it displays great on both Android and iPhone!