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.
Related
A page on my site is showing an unwanted white space on the right side in mobile, the page is showing fine in android Mozilla Firefox browser but the problem is occurring in android Google Chrome browser. All the other pages are fine. I can't find out where the problem is lying in this particular page. Following is the link of the page:
https://digifrizz.com/digifrizz-new/about.html
The screenshot is as follows:
this is because of you make container padding 0pxusing class px-0 remove this class with the container class at the place mentioned by me in following image. I am sure this will help.
Thank you.
Its because this section has no padding from left and right
Please add 15px padding from left and right in this section
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.
I have a portfolio site here: www.mrliger.com. When I open the site in any browser apart from Safari and resize the browser window, the menu at the top of the page changes styles as desired. However when I resize the browser window in Safari, the header restylesto how I desire but when enlarging the window again to full size the header becomes stacked... Have no idea what is causing this. Could someone please take a look and advise?
Thanks
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 uploaded a modified version of my website earlier. It seems to work fine on my computer, but then I check my laptop downstairs, (small screen), and there doesn't appear to be a scroll bar to scroll down and see the navigation, so you're just left with a big image that doesn't do anything.
It's http://www.peach-designs.com - it'll only be up for a short time though as it doesn't yet work on small screens.
Hope you can help,
Kind Regards,
Snakespan
When I view the site in Chrome, the image covers the navigation because of the z-index ordering. Removing the z-index from #slider and the ul fixed the problem for me.