So I have a responsive theme and I want the home page to have a few columns that stay centered next to each other while on the computer... but when on the phone I would like them to go one above another... while each still being centered.
Thanks
Can you send the link to your page or set up a codepen snippet may be?
Also, for using on mobile and making them show better, use a width like, say, 31% for each div, with 3% margin on right of each, and make all
float:left
so that it shows better on mobile, and then for lower resolution media queries like, say , 480px or lower, use
width:100%
for these divs. So that they show perfectly on mobile devices with appropriate widths.
Hope that helps.
Related
I made this single web page and when I view it my mobile device, and I thumb to the left, the width of the website shifts over slightly, like the left and right edges are not completely contained within the device screen. It doesn't shift around on the DuckDuckGo browser, but it does on Safari. Is anyone aware of how to correct this?
I've used Bootstrap Grid and tried to set the correct element width specifications with CSS.
i think it's about the width of you div with the ID "spinningDial".
She's to big on small device.
Remove it for a test. Then the page width will be perfect on mobile device.
Or you can juste try to change the width of this div for a test (100px for example).
Thanks for the help, everyone. I changed the width of the spinning image and everything seems to be working. I had also forgotten that the corners of the transparent div extend further than the circle... whoops.
I have div which has height and width of 15360px respectively which is the designated area to drag my elements around. It is working fine on the desktops and laptops where the scroll bars will appear.
I have been using the media queries to work it on IPAD too, but when the site is viwed in IPAD the page gets shrinks because of the particular div which has the width and height of 15360px.
Can anyone suggest what can be done to make the Mammoth div to fit in IPAD so that page looks fine.
Any help is appreciated.
Thanks in Advance
You should play around with the viewport meta tag. See the documentation on MDN here: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag.
I think you're looking for no scaling and fixed width instead of device-width.
I am trying to convert a poorly designed template to a responsive design, found here:http://www.crhinc.com/about-mobile.html
Im having an issue where on desktop browser sized to mobile the template looks and works great, but on android and iphone, the page is larger than the viewport. i know i must be missing something, but as you can see, i have outlined the elements just to get try and see if i can find out whats in there that is stretching it outside the viewport and cause mobile phones to scroll from side to side but not desktop browsers.
i set the body up for 300px width just to see if i could find the rogue element, but put it back because it did not work. there are a few tables in the content, but all set to 100% width.
for some reason, it almost looks like the width in the desktop and on mobiles or not actually the same.
Jeff
Do you actually think it is the viewport? Do you have the viewport set with the right content?
Maybe this link could help.
Or is it just the CSS? In that case I would recommand you searching for width and such. Trying to find big numbers..
Setting a specified width should be for specified screen sizes. Otherwise make it max-width.
I need to apply 100px of top margin to a nested row in Boostrap so that the content lines up vertically with some other content in the page - ok all good when you view on a large screen. When I shrink the browser size to mimic a tablet / phone the content shrinks and collapses down - also good. However, the 100px of margin causes the content to now be placed well down the tablet page - ugly.
I have thought about using media queries to eliminate the content with the 100px of margin for tablets & phones - but eliminating content seems like the wrong approach.
Many thanks for all your suggestions !
If the content is unimportant for tablets and phones, then eliminating it is completely valid. Unfortunately, "unimportant" is EXTREMELY context dependent. However, you can just use media queries to set different styles (i.e. set 100px in full layout, set smaller or no margin in the tablet and mobile views)
So I have images that I would like to take up the full screen in my HTML5 code. I have their height and width set to 100% which I assumed should have done resizing.
If I place images in that are 3240x480 they fit my phone just fine, but on the iPad the stretch the height it seems to fit but the width seems to stay at 320.
If I place in images that are 768x1004 they fit the iPad perfectly, but on the phone they display to large. I thought the 100% would do rescaling, but I guess I'm wrong.
So I tried setting the images with 768x1004 to width="window.innerWidth". That shrinks it down on the phone pretty well, except it still stretches past the bounds of the screen a bit. As for the iPad it shrinks the width down some so now there is a gap between the image and the wall of the screen.
Any ideas how to get a clean and simple auto resize to adjust to the screen preferably with just the 1 image. Or else how would I set it so there are multiple images and it puts in the image for the iPad size if its an iPad being used other wise the phone sized images if its a phone being used?
Thanks
I´m pretty sure, that you can´t, without really ruin the quality of your picture resize the image. But I do know that you can use a script to redirect your user to the site that fits for their screen. See this site http://www.dynamicdrive.com/dynamicindex9/info3.htm or Google "Screen redirect" and a several alternatives appear infront of your eyes! :))