I'm not an expert in css and I am building my first ever responsive WP Theme. It seems I got it working on chrome and FF (at least it looks ok on my mac), but in Safari it seems that width 100% does not work when resizing browser window (the same on iPhone and android phone). The site is http://www.designstest.co.uk/ stylesheet: http://www.designstest.co.uk/style.css
Thank you for reading. Any help will be appreciated.
Hey, as I checked your code, I found a lot of issues.
I strongly advise you to hire a designer to build your website with a responsive layout.
If you don't want to hire a designer, there are a lot of free responsive layout frameworks available for you to use.
also, you have a visible horizontal scrollbar in your website, if you wish to remove it simply add this to your CSS.
*
{
margin: 0;
padding: 0;
}
This is what I see when using FireFox on Windows 8
Related
I have a very odd occasion on my website css. I am using bootstrap columns to align my modules in the rows but in some iphone modules (iphone 6-7-11), the display property behaves differently than other iphone models. My website is https://mgcosmetics.gr/el/. My problem is with the cart button at the main menu on the mobile version. I want it to be as the first image. Tell me if you need whole css files because they are big! Thank you in advance for your time!
Correct way of presenting (chrome dev tools desktop, mobile view) :
Iphone 6 browserstack simulator dev tools:
After hours on that problem i found the solution. I'll post it here in case someone face the same occurrence. Also I haven't found a solution to this anywhere else. The problem was in css
display: table;
which for some very strange reason behaves differently in some iphone devices regardless of the ios version! I changed
display: table; to display: block; and now all the devices show the same thing.
My site is live at http://brand2o.com/. The site is responsive, and works fine at any size on every desktop browser I try and on my Android phone, but the problem is that on an iPad, the right side of the header gets cut off so it says "Licensing P" instead of "Licensing Portal."
I'm having trouble figuring out where the problem lies because I can't replicate it on desktop — Chrome's device mode actually shows it having too MUCH room on the right and the website not centering instead!
Any ideas?
Edit: Looking more closely, it looks like the iPad is giving each navigation item (they're flexbox children) equal width, and messing with flex-basis and flex-grow don't make any difference. I can't find anything about it but is this any kind of known bug? Again, it looks fine everywhere else, including desktop Safari.
Some of this issues are related to version of the OS and Safari also. What I do on this instances, if you connect your iPad to your MAC you will be able to inspect the HTML and CSS and figure the issue out.
Debug apple devices
Another site
Hope this help!
Regards
Figured it out: The lis were set to width: 100%; for when the navigation collapses, and I should have overwritten it in the media query for bigger screens. I added width: auto; and it's fixed!
I made a carousel to fill 100% height and width of browser and it does that fine on a desktop or in protriate mode on a mobile but when switched to landscape the display breaks. I made a bootply but it doesnt show the error im refering to. Maybe its caused by the form I have added?
http://www.bootply.com/BKl0fXVMrj
You can see the actual error here. Open dev tools select a iphone4,5,6 galaxy s4,5.. pretty much any current smart phone and you will see what I mean.
http://www.casouza.com/homelist
After my previous comment I looked deeper into this, try the code below in your CSS.
#bg-slide-carousel .carousel-inner {
position:fixed;
}
This makes the background carousel stay with the viewport. I've tested this in the chrome dev tools emulator with the site you posted and it appears to work fine.
I am developing a website with HTML5 Boilerplate and when started checking it on iPhone saw that it doesn't look good at all. It looks like body gets one width (320px) and other elements get another larger than body causing the webpage look like this
screenshot from chrome https://www.dropbox.com/s/hzdd04wufckcewr/Screenshot%202014-01-20%2008.20.51.png
screenshot iOS simulator https://www.dropbox.com/s/llj4w0gp1cxsh86/Screenshot%202014-01-20%2008.21.21.png
I am using normalize.css default styles. The site has some mixed width for example one div's have a 940px width others should have 100% of viewport.
Has anyone seem this problem before? How can it be fixed? Thanks in advance
I'm creating a new website for my webshop - And I have this css problem ...
The system is made on the prestashop platform, but this is basic CSS so that doesn't matter.
On the CMS pages, I'm having a problem centering the page, i've tryed using the -tag, margin: 0 auto, margin-Left/right auto, 100% width and so on.
The problem isn't that the text isn't centered, it's that the browser doesn't realises it untill you change something with the inspector or change the browser width.
So if you update the site, the content jumps into place.
(if you don't see the problem, try pressing the same menu item again - sometimes it works sometimes it doesn't. The sites with most problems are: /betingelser-3, /udtalelser-6 and /om-os-4.)
The problem is only in Safari and Chrome (webkit) Everything is fine on IE, firefox, Opera.
http://forsejt.dk/mackabler.dk/content/betingelser-3
I think there is just too many div's and css-styles so the browser times out? If that can happen:) I've tryed on a Macbook pro 15", Macbook air 13" and Mac pro.
Any Css tricks for this?
So I'm not quite sure why this is, but it seems like the overflow:hidden in .row is the culprit. Try removing that or overriding it and it seems to work.
My guess would be that it gets in the way of webkit calculating the width properly for some reason?
There's also some other suggestions on a similar question here: CSS centering not working with margin auto and overflow hidden
But it seems to me that the accepted solution there won't work for you, as it looks like all of your floats are properly cleared.
Try adding:
text-align: center;
to #columns in the css.