https://faultde.github.io/rps-v1/
When I scale the window on a computer,the page resizes, but when I load it on my phone it doesn't scale. Can't seem to find the problem in my CSS.
in body css you have given margin:30px and width 100% remove both
Related
I'm about making a responsive blogger template. I developed it in Chrome from scratch but when I opened it with other browser, in this case is Ms Edge and Internet Explorer, there's a little problem. When I resized the window to mobile size, the horizontal scroll shown. So I tried to open in Android Browser (not Chrome) on my phone, the horizontal scroll is gone. Is this from my code or Ms Edge itself?
The horizontal scroll shown when the window resized
If you want hide only horizontal scroll, put this in your css:
body {
overflow-x: hidden;
}
You can add a simple body {overflow: hidden;} to your css to block out the scroll.
Is it what you wanted ?
When viewing my website from an iPhone or iPad my site displays just fine when scrollbars on present. However, when you access a page when scroll bars are not needed the display gets messed up. I have no idea how to resolve this issue. Any ideas?
For an example my website is www.surfboardswap.com. The homepage appears fine on a mobile device. But if you access www.surfboardswap.com/alerts the display does not fit on the page since scroll bars are not needed.
Thanks for the help!
It looks to me like both those links you provided render with scroll bars depending on the width of my browser screen. I think you're ultimate issue here is responsive design.
You have a width set on your .container css selector. This is breaking the responsiveness of you're site, because it's being forced to that width even on smaller screens. Try removing that!
I need some troubleshooting help from some CSS experts. :)
My website at www.daylightfoods.com loads perfectly on full desktop browsers. While the home page on mobile devices works as well, the sub pages on mobile devices have a problem with the navigation div at the top. I am finding that the navigation div (where the grey background is and the navigation links) is not expanding to the full width of the mobile device screen. I can't figure out why, and would love some help!
I have been doing my mobile testing Google Chrome for iOS (both iPhone 5S and iPad).
Here is the page in question:
http://www.daylightfoods.com/sustainability/
It loads perfectly well on desktop versions, but on mobile devices the navigation at the top for some reason is not full 100% width.
Any help would be greatly appreciated!
It is caused by <meta name="viewport" content="width=device-width"> on your subpages
Check if, inside the div, you have any hidden elements for which you have not set "width: 100%".
In my case I had an hidden img (set to only show up only on large screens) that didn't have a "width: 100%" attribute and thus, even when not visible, the image was extending outside of the parent container (the div), preventing the parent container to take all available screen space.
Hope it helps.
I'm making a little demo thing for my sister's wedding, I basically want to set the body background to a different image as the user scrolls down the page.
Here is a functioning version of the page.
The process itself works fine, however on:
A desktop mac running Chrome (browser width around 1900px)
The image does not stretch across the page, although the background remains fixed (as it should).
Screenshot of this problem
A mobile phone (android chrome)
The background image does not stay fixed (when the user scrolls down, the background image is left behind). Funnily, I cannot reproduce this in my laptop browser by making my window smaller - possibly a limitation with the mobile browser itself?
Screenshot of this problem
Any thoughts on what I'm missing here?
The image is 1200px wide. So on a 1900 resolution the image doesn't stretch and is smaller :). If you use background-size: 100%; It should stretch.
As for mobile: This question is the same issue as you with solution.
set the
width:100%
margin-left:auto;
margin-right:auto;
in your image tag or div
if the 100% is not work use px for width
I'm building a test mobile website for a client: http://preview.stafforce.co.uk/mobile/
As you can see, upon the loading the website on a mobile device or on the desktop using the correct viewport size you will see a red box with three options. The red box is the page itself told be red by a class of splash. (I had originally had this as a separate DIV that sat ontop of the page using position fixed, but that had several issues with positioning).
On the desktop this works fine, but on the mobile device e.g. iPhone using Safari when the toolbar disappears and/or you scroll/change orientation you get a black bar, this is because the body is appearing as the div is not taking up the full size of the screen (jq mobile uses min-height which is done using the framework to make this happen).
Any ideas on how to fix this? Or had similar issues? Also noticed when doing the transitions that they appear cut off in places again likely attributed to this min-height not getting things correct.
Example:
Edit: The reason I have changed the body to black is because when you do the flip transitions, this is what you see behind, and black is the correct colour for the background when doing transitions on phones such as the iPhone.
You should use Jquery mobile enhanced 'listview' and keep your content in DIV with data-role='content'.
Jquery mobile will make your content fullscreen.
You should not style listview or anything else manually.
Here is the demo: http://jsfiddle.net/nachiket/YSp3x/
I haven't set icons and your logo, but you will get idea.
If possible use Jquery mobile Theme Roller for base styling, and do customizations on top of it.
EDIT:
You can set color on div which has data-role="page".
Like:
.myPage {
background-color:#ff0000;
background-image:none;
}
And in HTML
<div data-role="page" class="myPage">
I have already updated jsfiddle link.