Im making a Website with Media Queries. In the Mobile Version there should be a Hamburger-Dropdown Menu, where the Items are Centered, but on the Desktop Page the Menu-Items are not centered (they're normal). I've tried to add a Tag in the HTML and give it a Id, and delete it with js, but if i do this, the whole Menu disappears. Or i gave the Center a Id and wrote in the CSS, that the display is none, but also in this Case the whole Menu disappears. And if I write text-align: center in the CSS, it works when i rezise my browser Window on PC, but not on a real mobile device.
Thanks for your help.
Related
I have a site which has a tiny sidebar with the social icons on the right side of the page.
On the desktop version these social icons are placed on the right side in Chrome as should be: live version http:// ont.999games.nl/ the-unusual-suspects.html
chrome desktop version
On the mobile browser these social icons are not visible unless you slide the page to the left:
chrome mobile browser
I have tried a range of css and metatag tricks but none have resulted in a page exactly as wide as the browser with the social icons visible on the right side.
set my container DIVs to position:relative, then set content DIVs to position:fixed. Tried adding metatag viewport, and versions thereof. All didn't work.
Is there a magician who does know why this is happening and more importantly how to fix it?
I can't replicate the issue in either chrome desktop reduced to mobile width, or on mobile. It's looking ok to me on both.
We have a responsive website which has a search field element showing at the very top centered horizontally. When you reduce the screen resolution to that of a tablet or mobile phone, the search field element disappears completely although if you inspect the code, the code is still there but the code is slightly greyed out and i guess this means it is disabled and therefore not shown.
How do i get this code to show in the tablet and mobile phone resolutions. How do i have this code not greyed out?
Viewing your CSS would help, but it looks like .header is set to display: none; or something similar in your CSS.
I am experiencing issues with the main logo link when the browser width is lower than 992px. It's working fine above this width.
Link is www.bestkennels.ie . If you visit any page and click the logo it should bring you back to the homepage. It seems only the top part of the logo is clickable. If i inspect in the dev tools i dont see any logo height issues.
I've tested in the latest Mac versions of Chrome and Firefox
Thanks for any advice.
The problem is that div#navbar is covering part of your clickable logo. Its height should not be so large. You should use a margin-top to properly separate the elements instead.
I'm at the very start of creating a clients website, however i've already hit a stumbling block; i am trying to add a ribbon type look to the navigation in Wordpress, however whenever i add a padding or margin to the navigation (namely .menu ul), on iOS devices like the iPhone and iPad, the right side of the ribbon extends across the screen further than it should.
Any idea as to what is causing this?
Site in question: http://site.n8geeks.com
Edit: I changed the width of the .menu ul - It appears when i add a pixel value, it is interpreted differently in iOS browsers, however when i add a percentage value it seems fine on iOS. Any ideas why this is?
Edit2: Now the issue is that the top part of the ribbon doesn't show on the right hand side on iOS devices (the bit that 'bends behind' the page). Any help?
Thanks.
For those who may have a similar issue to me in the future, the problem was that Safari was taking the parent wrapper and resizing it to fit the screen. Fixing this involved adding a new wrapper that was bigger than the #page wrapper.
I have a very simple website that creates a horizontal scrollbar in the following:
Android:
Chrome
Firefox
Opera Mini
Not in Android Default browser but the site looks broken
iOS:
Safari
It's really no big deal but I'm comparing my website to the full desktop site of http://google.com and Google's website doesn't get the same problem as mine.
I am still pretty new at CSS and HTML and I feel like I'm breaking some really simple rule I don't know about that is creating this problem. Any ideas on how to fix this?
If you would like to test it. Go to http://natio.in
The horizontal scroll bar is appearing because you have fixed width's set on elements, that when the site is viewed on a mobile browser, the width of those elements is set wider than that of the viewport width. If you use a percent for widths, your webpage will be able to adjust accordingly.
well, you can include overflow-x: hidden; in the styles for your body tag, but if there is content outside the width of the phone, you wont be able to get to it. Or you could crate a responsive layout with media queries.