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.
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 am trying to make a webpage with HTML,css and jquery. But the problem is that the webpage is not working properly on phone or other small screen devices. Here is the link for the page.
The solution is quite simple. To have responsive layouts, use percentages for width/height and margins rather than pixels (px) so that they can auto-resize when the screen size changes. To make your bottom bike image look responsive, use width: 95% and height: 95% (or whatever other percentage you'd like). For the Bikerz icon, try using margin: Google Chrome's inspect feature is very useful so make sure to test it out on it. Simply right click on the web page and click Inspect. Once you are there you will see an icon left of the "Elements" section. When you click that, you can view your web page layout under different resolutions.
Either you have to write custom css to support mobile device or I will recommend to use Bootstrap framework in order make compatible your site on mobile. Bootstrap will allow you to developing responsive, mobile first projects on the web.
If you are going to use css then, i will also recommend you to validate your css support at different browser and mobile platform through canIuse.
I'm building a website using WordPress. Although the pages are well suited for Mobile site, this particular page is displayed very congested. This is the page from the website website - http://www.cyberfosters.com/anspress/
If you click F12 using Chrome browser on this page and toggle the "Device Mode" you'll see how it appears on a mobile device, I'm going through the CSS files to find out what needs to be changed but I can't seem to find out.
What I want is that the page should appear on a mobile as it does on the website but just scaled down.
I was looking at your html and css and the problem seems to be very simple, your site is not build to small deviced because it uses a mix of width values in PX and %, the design must be set in % to work well on multiple devices without using special pages for mobiles and other for pc this is my recomendation.
Example if you put a 1090px image on a 800px screen resolution it will just not work so what we do is to set image width value to 100% in this case and so on that way the images get auto resized the easy way. Do the same with tables images divs spans etc
Hi there I am developing a mobile site (NOT AN APP) for an iPhone.
This is a really noob question though I have searched and not really found what I am looking for, as I am not sure which exact search terms to use.
On an iPhone when you click an image it shows that image larger on the screen so you can zoom in/out.
I am using generated thumbnails that are a lot smaller than the original image, how do I load in a full resoloution image when a thumbnail is clicked?
again sorry for the noob question, if someone can point me in the right direction, part of the problem is that I have NO experience of mobile websites or iphone functionality, I will keep playing with jquery mobile and see where I get with that.
When you click on the thumbnail, you may redirect the user to an another HTML page where is include the image with a max-width and max-height in %.
In mobile, it's better to have a design in % to adapt the design at all mobiles screen.
<img src="myImage.jpg" alt="myImage" id="myImg" />
And in CSS
#myImg{
max-height:100%;
max-width: 100%;
}
You have others solutions, by using jQuery plugins too : http://fancybox.net/
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.