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.
Related
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
I've been asked to see if I can solve this issue. Another dev wrote the page, using a mishmash of percentages and px values for margins, padding, dimensions etc. These values are sprinkled both inline and in the css file. It was meant to be deployed on a set of tablets with a 1920x1080 resolution. However, the actual devices are running 1024x600. As you can guess, this has thrown everything out of whack. As of now, I'm guessing I'll be spending the next few hours changing the values to percentages. Is there any other way to do this?
To clarify, I don't need to make it responsive. This is a page that would only be viewed on a 1920x1080 screen but now will only be viewed on a 1024x600 screen.
This is a little dirty, but it will work:
html {
zoom:0.5;
}
your webpage will be zoomed to 50%. You can add media-queries so it only uses the zoom on specific screen widths
This is a very 'hacky' solution, but what finally worked was creating a new web page containing nothing but an iframe hardcoded with the original resolution settings (inline CSS height and width). The content of that iframe is the page that was to be resized. This entire thing was then imported into android studio and then exported as an apk. When that apk was installed and run, it worked. I'm not sure why, but it did work, so we left it at that.
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 have done about 20 websites which included the Business Catalyst gallery module. This is the first one that I'm having problems with and I don't know why. Please check out: http://topspindenver.businesscatalyst.com/gallery.html.
You will notice that if you make the window smaller, the gallery thumbnails start overflowing the window. In every other website that I've done, the gallery was responsive within the specified skeleton columns, and the thumbnails automatically get smaller, like on this site: http://mountaingardendiva.com/.
Does anyone know why this is happening only on this site? I have already tried specifically targeting the table that the thumbnails sit in and given it a max-width:100%, but it didn't work.
I'm guessing you're using Firefox to view this site and noticing this problem for the first time, because it looks fine in Chrome. It has to do with how Firefox computes the width of a table and the max-width of images within the table. You can solve the problem by applying a max-width to td.photogalleryitem with each media query that changes the page width.
It does work in Chrome, but to make it work in FireFox try setting the css on your images to width:100% instead of max-width:100%
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.