Generally, overflow:hidden solves all my horizontal scrolling problems, but in the following case it doesn't and it also disables the vertical scrolling.
If you'll mark a text and drag left the screen view (while responsive), you would be able to see the horizontal scrolling problem. here is a link:
http://nexus.techsaran.com/
It's because you have an adsense block which has a hardcoded width of 728px.
So whenever the viewport is < 728 px, this div will extend beyond the right hand edge of the page, hence the horizontal scroll bar.
Edit
Can you please tell me where you've found it
It's in this block of code here
<div style='text-align:center'><div class='adsense' style='display:inline-block;width:728px;height:90px;'>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 728x90 -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-5337874066772271"
data-ad-slot="6784283332"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
Whenever you have horizontal scrolling like you described, it's generally an indication that there's an element which is too wide, so that's what I was looking for. In this case you can actually see that the ad is too wide if you narrow your window. I used web inspector (similar to firebug) to confirm.
Sometimes you can't actually see the element which is causing the problem. In web inspector, if you hover over an element in the code view, it will be highlighted in the page view, so this helps.
FYI, there are ways to work with Adsense on responsive sites. Checkout this link to get you started
Good luck!
Related
I'm using headless uis Disclosure to open a sidemenu. In a <Disclosure.Panel> I use "overflow-auto" to enable scrolling in the menu. However I want to disable the scroll on Body when I do this since otherwise I have two scrollbars for the y axis. Any tips on how to achieve this?
Yes! Target the <body> or <html> element on the page and add overflow: hidden to prevent scrolling on the X or Y axis. You can do this with a class and toggle the class on when the panel is open and off when its closed to allow scrolling again.
Hope this helps!
I am writing a Single Web App with material ui, that needs to be responsive, but I do not know which is the control where I must allocate the mains component, if it is a grid or a box.
The next image show the main components arrangement in md,lg,xl
The next image show the main components arrangement in sm,xs when width < 960
In the web I found many complex and very difficult to understand layouts, but not find a basic example. Some like "material ui responsive for dummies".
The mobile version, will have a breakpage between the Appbar and Sidenav, both will occupy the full height, and the Map in the second page will fill the screen.
I did it for you with MU Grids and media queries, if you have questions, ask. I am always ready to help. This is codesandbox link. Let me know if it help you.
https://codesandbox.io/s/charming-shirley-oq6l5
Show my codesandbox answering your problem : https://codesandbox.io/s/amazing-sound-1nj87
It display your layout for md lg xl correctly. For xs and sm screens, sidenav & map take full height with a break page between sidenav and appBar
Thanks to both, it solved the main part o what i need.
Also need to implement a change of page.
I forget to mention that the map will be React-Leaflet,
so need to implement a flap button over the map for the mobile version.
The button is for scroll to up, because any finger movement in the map area only will affect the map content.
Do not will have effect in the scroll.
Another thing to implement is the break page concept:
The behaviour of the break page is like when you see a pdf in presentation mode and press
the keyboard button Repag - Avpag, it change all the content and never see the half top and the half down.
Grettings
I'm developing an ionic app which, on one page, uses touch to scroll down in a table. However, the default "draggableness" of the whole page interferes with what I want to achieve. How can I prevent the content from moving when dragging?
I only found answers about the sidemenu.
.
Example of draggable content: http://codepen.io/ionic/pen/VLwLOG (just try to drag up/down on white background)
Thanks in advance
Use <ion-pane> to wrap the entire page, and insert <ion-scroll> where you have content that you want to be able to scroll (such as the table). You just have to make sure to set the height of the scrollable area. If your page is wrapped in an <ion-content> element, it will be scrollable by default.
From the docs:
If you'd just like to have a center content scrolling area, use
ionContent instead.
I have a series of panels that work with tabs. I'm using aria-controls, aria-selected, role="tablist", role="tab" on the tabs and aria-labelledby, aria-hidden and role="tabpanel" on the panels - all seems good.
However, below a certain screen width I want the same elements to be collapsible, expanded and collapsed by buttons at the top. Obviously I need to hide the tabs list, and include buttons at the top of each panel which are hidden above the breakpoint. I would use aria-controls for the buttons - but there seems to be a few overlaps / clashes between the accessibility markup for the two layouts.
Is there a right way of doing this, or is it simply the case that I should ignore accessibility markup for the "mobile" version, assuming it's irrelevant to screen readers? Are there scenarios where the accessibility markup is necessary for responsive layouts?
The correct solution is to simply show the tabs as buttons (i.e. change the styling) in the small screen layout but leave the markup exactly the same. If you want to have multiple sections expandable simultaneously, then you can use aria-multiselectable (which essentially turns tabs into accordions).
Do not ignore accessibility for mobile. Mobile is as easy to make accessible as the desktop version and is becoming the primary way that users access many web sites and applications.
I can't figure out how to remove the scroll bar from my website.
I've looked up ways of doing it on SO but with no luck. It just keeps staying in the box.
I also want to be scrollable but just without the actual scroll bar visible from computers.
(It's not visible via mobile devices which is okay)
Regards,
Alex
There is no standard cross-browser CSS code you can use to render scroll bars invisible. However, you can put your <div id="shoutbox_data"> element inside another <div> element with an id field like "shoutbox_wrapper", set the CSS overflow property of the wrapper element to hidden, and then use JavaScript to automatically resize the wrapper element so it covers up the scrollbox. The idea comes from Jan Bilek, and you can find the JavaScript to accomplish this on his blog.