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.
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 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
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 realy need your help as this is driving me nuts.
On my website www.markett.nl I have 2 divs floating next to eachother.
All the browsers seem to load nicely, accapt when I view the website on the iPad the div is pushed downwards as if its wide is to large.
I have read it mayby has to do with some css padding issues, but I believe padding is not used on these div elements. I use firebug for insight in css but cant solve my problem.
I've uploaded 2 images so you can see what the probem is:
Image 1 as is loads on most browsers.
Image2 will show the problem.
You have #media queries in your CSS file for responsive layout. Find this in your CSS (around line 2640):
#media (max-width: 800px) {
/* Simplify the basic layout */
#main #content {
margin: 0 7.6%;
width: auto;
}
and remove the margin attribute from that rule. Also you don't have to test on iPad the result - you can simply change the width of your browser window.
You're using media queries to do different things depending on the width of the viewport.
If you load your site in any browser (I'm testing with Firefox, for example) and reduce the width of the window enough, the same problem happens.
To fix it, follow Zoltan Toth's instructions.
I'm currently developing my site with a new layout and stuff, and after hours of fiddling around in Chromiums inspector, can't seem to pinpoint why the the content tabs won't fully stretch like in Firefox or IE9. There seems to be a small gap on the right side.
I'm still in the process of tidying the whole css so there are less conflicts, but whatever I do the tabs won't fully stretch in webkit.
Here's a testing page I've set up with the jquery tabs
http://bad-good.org/index.php/Troll_2
Any ideas or workarounds? Looking forward to learning something. Cheers
You've set the ul to width:100% which renders to 975px.
The li are set to width:25% which in theory should be 243,75px... Chrome makes a floor approximation for the decimals (truncates them, so 243,75 is 243), like mentioned here.
I'd recommend changing the site's width (for example 960px) or working with fixed widths in opposition to percentages.