We are creating a site which is responsive. However, due to time constraint, we need to make a few pages only work for the desktop viewport. The pages have a top navigation which is responsive. Is it possible that when accessing that page from a mobile, the navigation is responsive, but the rest of the page just loads completely adaptive (like a non-responsive site would load on the phone)?
Please advise.
I dont think, that this would work very well.
How would you put two 1000px and a 300px width element on one page so that they both use 100% of the screen?
Maybe you can make a responsive page with navigation an all and load the pages you dont get responsive in an full size iframe below the navigation. But dont know if this would work very well. Also iframe handling, like scrolling etc is a bit picky on mobile devies.
Related
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.
So I'm making a grid with iframes in it. What I'm getting now is this:
As you can see, the website adjusts to the size of the iframe. What I want, is that the content will shrink to the size of the iframe, without using their responsive design. I don't have much experience with iframes, I hope there's someone here that can help me.
Thanks!
That cannot be done with Iframes -- The only real option you have is to take a screen shot of the website in a full size browser, and then serve a scaled image of the site.
This can either be done
when the user otherwise opens the website, and the scale down those images to the size you want
That is what google-chrome does for the short-cut page.
or server side, create a virtual browser and render the page server side, then take a screen shot of the virtual browser.
That is what some search engines have done in the past, where they offered a miniture view of the website for a search result before visiting (I however don't think any search engines currently offers this feature)
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
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 have the following jsfiddle http://jsfiddle.net/KfPOQ/
using a web browser it is fine however when on the ebay app on iphone or ipad i have to scroll right to see the full page how do I eliminate this issue?
You need to have the content of the page fit within your viewport (or screen) dimensions for the given media type. You can have different stylesheets based on the media type in a link/stylesheet tag. Say, for the iphone, use media="handheld" and try to keep the content within around 600px, or whatever looks good on your mobile device.
Here is another resource from w3c.