I am developing an e-commerce app for ipad both in landscape and portrait orientation. The main content div in the middle of the layout will have all the products displayed side by side. I have written media queries for both landscape and portrait. They are working fine, but I am getting a vertical scroll bar because of the content div (I think). I want to avoid the vertical scroll scroll bar completely.
top left: logo
next div: title
next div: products----I think the problem is with this div only.
nextdiv: footer
I can't send the picture because I have less than 10 reputations.
Can anybody help me with this issue?
You can try this
html{overflow-y: hidden;} if you want scrollbar disabled for your html.
Related
I have shopify store on which i have header navigation bar. And i want this sticky header bar stick to the top when screen resized to mobile size. in my current situation sticky navigation bar is working on desktop view but when screen resizes then it disappears. I want this header bar stick to the top in this way
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sticky_header
Please tell me how to make it sticky on mobile size?
The code that is used on w3 schools works on mobile. What I believe is happening (Without a link to your shopify site I can't be 100% certain) is that your shopify theme has 2 different navigation bars and you're only applying the code to the desktop bar. Apply the code to the other header, since it is not being displayed adding the class to the hidden element should not cause any issues.
if (window.pageYOffset >= sticky) {
header.classList.add("sticky");
mobileheader.classList.add("sticky");
} else {
header.classList.remove("sticky");
mobileheader.classList.remove("sticky");
}
I have a sticky menu set up so that on my desktop screen, the menu stays at the top no matter where the user is on the page. This works great on the computer, but not so great on a phone. My theme is a responsive theme so it adjusts to a phone screen pretty nicely, and the menu tab is condensed to a single drop down button on the phone. However, when you open the dropdown, all my menu bar tabs drop down into the first post content and are very hard to see and click on. I'm thinking this is because of the sticky menu that I set up.
I also have two ads set up outside my main content area. These overlap with the content area on a mobile phone. I need to keep these ads either pushed to the bottom of the content area, or hidden, on mobile view.
My site is www.beeandcompany.com. I would so appreciate if anyone would be able to help me out!
Well, just edit the responsive css you have in your style.css. There is a line
#media screen and (max-width: 779px)
That will work on all resolutions smaller than 779px. There target your menu, and position it fixed to top left corner.
For instance
nav.lowermedia_add_sticky {
position: fixed;
top: 0;
left: 0;
background: #aaa;
z-index: 100;
}
You can edit it to your liking. Also you should make your menu toggle always visible. And those ads are overlapping your content. You should get someone to go through your design and fix stuff for responsive.
On pretty much any web browsers, the scroll bar is displayed only when it is needed. This is fine, but the problem is that when the scroll bar is displayed, the width of the screen shrinks. This results in an awkward shift of the content on the screen.
I want to prevent this behaviour so that the width of the screen is consistent whether the scroll bar is displayed or not displayed. How can I achieve this? I don't want to use JavaScript/jQuery if possible.
Try jQuery "perfect scroll" plugin here is: http://noraesae.github.io/perfect-scrollbar/
Set the vertical scroll bar on the page like this with css,
html
{
overflow-y: scroll;
}
this will place the scroll bar in the window and it will stop the screen from jumping when it is needed.
cheers
This issue is with mobile touch devices.
My main screen is vertically scrollable and it's working fine. Inside of it I have got another div with horizontal scroll which works as well.
The conflict happens when I am trying to scroll vertically by moving my finger over child (horizontal scroll area) div. It doesn't scroll at all!!!
The area around this div lets me scroll up and down without issues.
Has anyone got a solution for this? Is it a css problem?
You will have some issues using that scrollable div on certain mobile browsers. Some require a 2-finger scroll and some don't allow scroll at all. I fear you will have to use JavaScript to detect scrolling.
One I came across which looks quite good was iScroll.
I have a static aspx menu. (horizontal)
I have content on the screen the sometimes requires horizontal scroll.
I would like to keep the menu the width of the visable screen and centered while scrolling. AKA. the menu would stay in the same position on the screen even when the user scrolls.
Is this possible?
Thanks in advance!
EDIT: I'm relaly looking for simple. Even something that would just keep the menu items aligned left would work for me. So the menu bar can go all the way accross, but the items in it would align left, so the right most part fo the menu bar would be empty on longer screens...
Try this one..it works well for me. It uses jquery & css. I put it on my masterpages.
http://net.tutsplus.com/html-css-techniques/creating-a-floating-html-menu-using-jquery-and-css/
You can adjust the css to position it wherever you like