I apologize ahead of time, I am not a skilled web designer at all, and I did do some googling before asking this, but it was complicated as most solutions require creating new divs and stuff, I was hoping there is a simple mod or line I could just add to the existing code for the footer to solve this?
Here is the site: http://ratecitident.com/ See how the black footer is overlapping the ratings box, how can I prevent this, to keep the footer at the base on any size screen? it may not show the problem on your screen, but it does on certain sizes, and on phones.
This is how it looks like on my desktop screen: http://gyazo.com/112b627bb056fc0bc6eb48070939d9b7
Thanks
You can simply add this little bit of code to your CSS:
div#content {
margin-bottom: 20px;
}
This is gonna give you more spacing,because you are forcing the footer to bottom of the content div to 20px.
You can always,target a specific screen using media queries,in this case you must target the iPhone screen,here is some good tutorials about the media queries.
css-tricks.com's tutorial
mozilla developer network's tutorial
Related
I am looking for some simple guidance for someone that can cope with most design basics but I am stuck in one area of my website design for findmethatwine.com
Dektop site is working as we want it (always room to improve but hey). It is the responsive side in one area I am grappling with. The logo for the site when you reduce screen size to tablet or mobile the template responds. The issue is I want to float the logo over to the left of the screen (for mobile devices) so this gives us room to use the right hand side of the screen to create similar blocks of content for the important free shipping and guarantee info that shows up on the full desktop site.
I have tried all manner basic float left in the css for the site and whilst it moves the logo it causes styling issues for the links in the very top right especially the sign in link which just messes up entirely.
Any clues as to how to go about achieving this or a work around would be massively helpful as neither me or my colleague can figure this headache out.
Sorry if I am missing any useful info you need, just ask.
One option would be in your stylesheet #
https://cdn5.bigcommerce.com/r-cd74cb12e5d8e952a812b68d3d60382a14b97a1e/themes/California/Styles/responsive.css
goto line 128 and change the rule to
.header-logo-mobile{ display:block; margin:0 auto; display:table; width:96%; text-align:left; padding:20px 0 16px;}
Then you are positioning the logo by a simple text-align property and if may cause you less grief that if you float it and take it out of flow.
Good luck!
I have been hunting around and haven't found a solution that works yet.
Here is my site which does what is needed on a desktop but when it loads in mobile the upper icons are no longer centered but the lower ones are
To supply all the code here would be long so I'm sure someone will knock me for that but to me it seems easy to use the inspector since i'm not sure if css else where could be effecting this.
I will gladly paste all of the code here if really needed.
As you can see on the desktop they are in a row but on a mobile I would like to have them centered and 2 in a row on portrait and all in a line on landscape but still be centered in the screen.
My Site Desktop
My Site in an iPhone 5 view
Within your div .centermiddle you have divs named .view that have the style float: left;
Instead of floating your elements you should set them as display: inline-block; which is the correct way of achieving what you want to do.
Doing so will center those buttons for you.
I've more or less finished a simple bootstrap site for a client, however I ran into an issue where the body element seems to have an extra 160px on the right side! I've spent like 3 hours already trying to find an answer.
To partially solve this problem I added the below css to the head:
html, body { overflow-x: hidden;}
This got rid of the extra 160px however on mobile devices (only tested iOS) the scrolling action is now incredibly sticky - rather than the fluid scroll we expect on a mobile device. Instead of one fast flick of the finger making the page continue scrolling, now when the finger leaves the screen the page stops dead.
In terms of user experience this isn't really acceptable and has been a real pain to try and solve.
I've put the site here for you to try on a mobile to feel the 'stickyness' goo.gl/yEI3rn
On desktop you can use inspector to disable the overflow-x:hidden; on the body to see the extra pixels on the right.
If anyone can investigate the site and tell me any one of the following it would be very useful:
Which element in the body is causing the body to have the extra width?
Why the body element has the excess width?
Is there an alternative to overflow-x that will not create mobile scrolling issues?
Any other areas to investigate to try and solve this issue?
Thanks so much for any insight here!
you can try adding this to your css to see which element goes all the way:
* {
outline: 1px solid right;
}
Im makin' a mobile website for a friend - and im using media queries to adjust her website for a more mobile feeling when watching it on any smartphone.
Feels like im done with the webpage - but when i view it on my phones iphone 3gs and htc incredbile S its like that you can scroll 2-3 pixels horizontally.
Some element is messing with this and im growing gray hair since i can't really find out which it is.
how do i solve this?
webpage link
http://www.linaahlen.se/
Had a quick look with the inspector in Chrome and it looks like it's this property:
div.entry {
padding: 0em 1em;
}
Line 106 of style-responsive.css - it's pushing the content just a few pixels wide, changing it to be padding: 0 0.8em; worked for me.
Oh, and just for the record, it's scrolling horizontally, not vertically!
Late, but for future reference.
I would like to point out the way to go searching the cause for the problem.
Open the site using Google Chrome Device Mode. Then check to see that the problem exists there (this solution relies on the problem to show up in the Device mode). Then start setting "display: none" to the elements one by one starting from larger elements like header, content container and check after hiding each element if the unwanted scrollability has dissapeared. This way you can track down the cause of the problem.
I had the same problem and tried to identify the cause at first by looking at the CSS code of every single element, wasted a lot of time and didn't find the cause. Probably a browser can render a page better that a human reading CSS...
I'm working on my portfolio website at the moment. I'm trying to optimize it for as much hardware as I can, so I've looked at my site on a tablet. Bummer. I have a footer that needs to 'stick' to the bottom of the window, which I successfully created with the following css:
footer {
position: fixed;
bottom: 0px;
height: 100px;
width: 100%
}
However, on a tablet it is not sticking to the window bottom, but hovering under the rest of the content (that's where I put it in my HTML). That means if a page doesn't have much content on it, the footer is placed on the middle of the page. I've googled around for a while, and found that some tablets don't support fixed positioning.
Does anybody know of a workaround to this problem?
All right, I'll answer my own question to sum things up.
Thanks to Darek Rossman, I've found some interesting links. The main point is that position fixed is gradually gaining more support on tablets, so it's a matter of time before this problem isn't a problem anymore. The workaround that seems to work for me is using the javascript solution Darek Rossman mentioned in his first comment. However javascript is still not working flawless on some tablets. Until better times arrive, I'll use a different stylesheet for tablets (using media queries). Special thanks to Darek Rossman who posted the interesting stuff!
The fine people at the Filament group created a plugin for this, check it out here:
Fixed-Fixed
They've also created many more great plugins for "progressive enhancement", check it out here:
SouthStreet
Keep up with them at they're website here:
Filamentgroup