I really need someone to help me on this.
The slide out menu cause the horizontal scrollbar appear in mobile website, it's hidden in desktop version.
Somebody please help me get rid of that annoying scrollbar. Thanks.
For your reference, here is the website: http://siuyian.com/test4
I did not get your question completely. I hope #media queries will help you out to make your website responsive.
Please refer to the following link to understand it further:
What does #media screen and (max-width: 1024px) mean in CSS?
Related
this website: http://mr-chemie.dev-pixalla.de has a scrolling issue on mobile phones and tablets. When scrolling in one direction, everything is working perfectly fine, but as soon as you change the scrolling direction you got to scroll twice. I noticed that when scrolling up after scrolling down, the vertical scroll bar on the right expands out to full height for a moment. When scrolling up the second time everything works fine.
I'm using Elementor page builder for Wordpress and got some knowledge with CSS. The problem did not occur on any other website I created. I just do not know any kind of property to solve my issue, neither did I encounter similar questions when searching for it on the internet.
Thank you very much for your help!
I had the same problem. It was caused by shape bottom divider turned on (Elementor, waves divider). The top one works fine. But when bottom is enabled - then the strange behaviour on mobile happens.
I have a problem displaying the mobile menu. Here is the page http://www.hawaiiluaus.com/contact.htm
When you minimize the screen you can see the menu showing up very little bit, indicating it must be some sort of z-index issues. I tried a few solutions but it still did not work. I would appreciate any tips for this issue. thanks!
http://medialoot.com/preview/css-only-navigation-menu/index.html
I'm learning how to make a website responsive and I came across this issue.
You see the ul left aligned and I'm trying to make it center aligned.
It kinda looks simple but I couldn't solve it. Please help.
I have to make a widget responsive. The url is
http://dev.pt-staging.com/discovery/careerpathwidget/index.html
The problem is it has lot of images & a background image too. I cropped background image for Ipod 320 x 480 (portrait ) it looked fine but when I see it in landscape mode it looked as it`s cut. I am amaze that there are many devices and many orientation how can I set my background image to appear on all in a same look and feel.
Q2 I want to make a design which looks good on all mobile phone so that if user see it in portrait the design looked shrink and in landscape it looked expanded, I dont want to create design for each & every resolution. So which resolution I should take to cover most of the smart mobile phones. I think on tablet my widget can appear easily as its 767 in width .
Please guide me , The site is currently responsive till i tried
This may do it. It worked for me.
body {
margin:0;
padding:0;
background:#d6d3c0;
background-image: url(../images/background.jpg);
background-repeat:no-repeat;
background-position:center;
background-size:cover;
}
I'm busy making an existing site responsive, currently I'm only making it responsive for one resolution so that my sales manager can "sell" the idea of a responsive site to the client. I've run into a problem, I've been assigned the screen size of 480px by 800px, the screen size of a Samsung Galaxy S III Mini.
When testing the responsive design on my computer using responsive design view in firefox or various other online tools, it works fine. However, when I test it on my phone, it displays the correct responsive design but it does not fill the width of the screen. In other words, the screen width is 480 pixels, but nothing on the page actually fills that 480px it only covers about half the screen width and leaves white space on the right.
This is the media query that I'm using:
#media only screen and (max-width : 480px),
only screen and (max-device-width : 480px){
Does this have something to do with pixel density or what is causing this problem?
Thanks in advance
Kind Regards
Willem
<meta name="viewport">
Have you looked into this tag? This changes the way the layout is zoomed/scaled on mobile browsers. You can look at what I found here: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag . This example shows the problem you seem to be having. The "viewport" tag works in all mobile browsers, as far as I know, but you should check different browsers on the phone if this doesn't help you.
I had the same right-side white problem when all widths were working correctly, and solved it by turning off overflow in CSS as follows... This might hide actual content so you will have to test per your situation/layout...
html { overflow-x: hidden; }