I'm very new to HTML/CSS and trying to practice by making some basic sites.
The desktop version of my site looks good, and when I inspect it in Chrome the mobile version looks good, but when I actually use a mobile device, the images aren't stretching to resize for the viewport. By trying to fix it I keep breaking it further, so I'd really appreciate some help.
I tried to search for this problem but the solutions I found told me to use background-size: cover which is what I'm already doing. I tried to change the body to body {width: 100vw; height: 100vh;} and also the advice here about taking out the height: 90vh and leaving background cover and width, but that reduced it to the size of the div line, which is too small. I feel that this solution here with media queries is close but I can't figure it out.
Here is the repo and here is the GitHub page where you can view it. Thank you in advance!
Desktop:
Inspector:
Mobile:
try to put background-position:center center;
anyway be careful with a fixed background, it causes huge problems with mobile devices performance
Related
no mater how mush I trying my web site responsiveness for mobile. but I am unable to do it I don't know what I am doing wrong. help me to learn how to make responsive site.
I tried to make some sites
repository-1: https://github.com/nasershareef/Practice-Frontend-Dev-8
site link-1: https://nasershareef.github.io/Practice-Frontend-Dev-8/
repository-2: https://github.com/nasershareef/Practice-Frontend-Dev-7
site link-2: https://nasershareef.github.io/Practice-Frontend-Dev-7/
I messed with size
grid
flexbox
nothing worked my site was not responsive I don't know what to do
When I'm opening your sites from links in Chrome DevTools and mobile view, sites are looking fine, so where is the problem?
Your first site totally looks fine in my opinion. I opened it and inspected it using DevTools but if you expect something else, then please elaborate.
Talking about the second site, you have used an image and upon reducing the screen size, your image is shrinking in just 1 dimension. It is not maintaining its aspect ratio. For this you can set width: 100% and height: auto. Do let me know if this works.
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.
On this website, there are many full width parallax images which display on desktop. However when viewed from a mobile device, such as an iPhone 6 - Safari / Firefox, they're nowhere to be seen? How can this be fixed?
background-attachment: fixed on section.parallax_section_holder, is causing the issue for you. Reset the css property in media query may the fix the problem for you.
If you don't require parallax effect on small screen you reset it to background-attachment: initial.
This might help you, have a read.
Note: Its always a good practice to post your code or Jsfiddle.
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 wrote a website but I have a bug in it, when I resize my browser my website resizes with it. I have noticed this in Firefox (10.0.2), Chrome (16.0.912.77) and opera (11.60). I tested some other websites omgubuntu webupd8 and when I resize Firefox it still looks good (it doesn't resize with the web-browser). I would love to post images but I need 10 reputation for that.
Using CSS, apply a width (such as 1000px) to your <body> and add margin: 0 auto; to centre the content. You'll have to bring the width of your navigation links down and re-position the ads, but this will stop your site from 'resizing' with your browser.
I strongly suggest using a good CSS Framework. Two good options are:
http://960.gs/
http://blueprintcss.org/
They provide you a fixed width layout as well as an easy way to divide the column into grids.