I am building this mobile website.
If you check it on your mobile browser it should fit in such that there is no horizontal scrolling. (Content should only be vertically stacked).
Can someone help me in fixing the CSS of the page. Just let me know what the correct CSS should be so as to auto adjust for different mobile phones.
CSS of this page can be found here. Basically, two main components I guess. (body and content).
Also, I used this mobile website as a sample. Please refer to its inline CSS by viewing the source of that page.
Thanks
Okay, so it seems that your #content div is actually pushing the boundaries of the screen even on my large firefox browser. In your CSS you have it declared like so:
#content{
width:100%;
margin: 0;
padding: 20px;
background: white;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
I have confirmed by editing the CSS locally, that your padding is actually pushing the boundaries of the 100% width div, but the good news is that since it's a block level element it already fills all of the room available to it. Try get rid of the "width:100%;" and see if that works for you. It will still display exactly the same, but without those scroll bars.
So something like this:
#content{
padding: 20px;
background: white;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
Related
I wanted to make a box for my website.
When I made it, some text moved down. Then I checked in Chrome dev tools and saw the box had a margin. I do not want that margin!
If I'm making any sense to you, please help!
#route{
height:300px;
width: 300px;
border: 1px solid black;
padding: 0px;
margin: 0px;
}
<div id="route"></div>
If there is a margin, then it may be inherited from a parent element. You should be able to pinpoint what CSS is causing this, by toggling the active CSS items within the developer tools you used to inspect the element. You may want to check out https://developer.chrome.com/devtools for more info since you haven't supplied enough code here for anyone to be able to help you.
Can you share more on this ?
What random margin do you get?...from my suspicion its that you are getting something like this
Browser window with margin
i.e. Your borders do completely touch the edges of your browser and when you inspect elements you get a body with an extra margin.
body {
display: block;
margin: 8px;
}
Most browsers do set a margin on the body element and you can easily remove this by using the code fragment below
body {
margin:0;
padding:0
}
I'm fairly new to CSS responsive coding. I've used a premade boostrap template and modified it. Its working fine. The only issue is when this website is viewed on Firefox responsive design tool at different size a mysterious white space appears after the footer.
Check the screenshot below for the mysterious white space being shown when i try to view the webpage on Firefox responsive design tool at: 768x1024 . How do we remove or hide this extra space ? I have tried; overflow:hidden; but its not working. Check this Website Link for the online version of the page
Please check the image screenshot.
That space is due to the site not being 'long or tall enough' for that specific device. You can fix it by instead of using height:auto on your .wrapper element, use height:100vh.
.wrapper {
min-height: 100%;
height: 100vh !important;
margin: 0px auto -155px;
border: 1px solid #F00;
}
100vh will get the vertical height of the specific viewport that it is being used on so it will always take up the screen.
Here is a little more on Vertical Viewport Heights
Hope this helps!
It is your footer element which is at the bottom of the page.
.footer, .push {
height: 155px;
}
Also, your fix is a greasy on and won't work always:
.wrapper {
margin: 0 auto -155px;
}
I am trying to create a mobile page that resizes for different devices.
So far so good but I cannot figure out why extra space is being added to the right of the page. I even tried hiding overflow and other hacks.
The issue appears when looking at the page on a mobile device.
Any help?
Here's the page:
http://pages.purolator.com/mobile
Also, there is padding being added as the tab section expands. Can't figure that out either.
Thanks!
Remove the padding from .pageHeader and it fixed it.
Try this:
padding-top: 15px;
padding-bottom: 15px;
Edit:
This will mess with the padding for your logo. So you will want to add this to your css:
.pageHeader img {
padding-left: 15px;
}
I have been working on a mobile version ov my webpage for a while now, playing around with various media queries and solutions. However I seem to have put myself at a miss. I was resizing elements to take 100% of the browser width when a device with a screen width of 800px or less is detected.
All of my other elements have fallen into place, except for one, and I have spent two days looking for the fix. I assumed it was a set width I had set somewhere in the Css but after copious searching I havent found any. The accordion navigation element seen in the middle of this webage, (My Webpage) Is suppoosed to span the width of the page but instead is massive surpassing the border of the webpage.
I would be greatly appreciative if I could get a fresh set of eyes to see if I have made a mistake here.
The main CSS area I belive to be the problematic area.
(styles.css) & (accord.css)
#wrapper {
width:100%;
}
#wrapper #c-wrap{
width:100%;
position: relative;
}
.ac-wrap-m{
width:100%;
font-family: Verdana, Geneva, sans-serif;
margin-top: 10px;
margin-right: 0px;
margin-left: 0px;
margin-bottom: 1em;
position:relative;
}
I took the page from the desktop build and remastered it and I know I did use set widths in the desktop build. Thats the only thing I think the problem could be, but I could be wrong.
div #c-wrap has a set width of 1000px and #wrapper has a min-width of 1080px. Once you remove those and change them to something else. you will not see the horizontal scrollbar
Add
min-width: 100%;
To your #wrapper #c-wrap code inside your media query and you'll be good to go.
Please not I'm not really skilled with CSS.
I'm working on a personal project and I have two columns containing text-boxes. Theses textboxes are customized with a background-image.
This perfectly works.
But when I'm resizing my browser, the texboxes overlap each other. When overlapping, I'd like the texboxes to be resized ; and when a min width is reached, I'd like to place the texboxes below each-other.
Can I do this in pure CSS ? If so, how can I change what I wrote to reach this goal ?
(Oh, and BTW, I need compatibility for IE8+, no need to support IE6 nor 7). Thank you !
Here is a JsFiddle to better understand the problem and see the code I've written so far.
I suppose the problem is from
width: 278px;
but I tried with % and it didn't resolve the problem (you can try it).
Thank you for your help
It is because of the width of your images you are using for the background, it works fine if you have the inputs the same width as the images. FIDDLE
input[type=text],input[type=password]{
border:none;
background:url('http://i.stack.imgur.com/FPaoD.png') no-repeat top left;
font: 14px 'Segoe UI','Arial',sans-serif;
color: #888;
outline:none;
height: 48px;
margin: 0 auto 10px;
padding: 0 10px 0 50px;
/* set width to image width */
width: 338px;
}
I would suggest styling them with CSS if you want them to be responsive.