In desktop view we have a left pane and a side pane. The left pane has a great deal of content, so much so that when rendered on a mobile device the side pane is missed by users.
When rendered on a mobile device the left pane is rendered first and then the side pane is rendered after the left pane. Is there a way to change this behavior so that the side pane is rendered above the left pane when in a mobile browser?
The first element found in the skin will be the first one rendered. There is no way to change that (as far as I know).
But it could be as easy as switching two div elements in the DNN skin page.
<div id="SidePane" class="SidePane" runat="server">
<div id="LeftPane" class="LeftPane" runat="server">
instead of
<div id="LeftPane" class="LeftPane" runat="server">
<div id="SidePane" class="SidePane" runat="server">
But depending on the CSS and the HTML design of the skin this could be an easy fix or completely destroy the site design. If you bought the skin at the DNN store (or another vendor) it could be worth trying to ask the seller.
We ended up accomplishing our goal by having a separate page for mobile with a different layout. DNN then has a capability to redirect to a different page if mobile device detected.
To place one pane over the other on certain screen sizes, we use z-index.
To do this, simply change your pane z-index using css:
#media (max-width: 767px) {
.leftpane{
z-index: 2;
}
.sidepane{
z-index: 3;
}
}
Let me know if this works for you. Thanks!
Related
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.
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!
I am new to Drupal. I have two webforms in a page. In Drupal on creating multiple webforms they are placed below one another. I want to place them side by side.
There're variety way of doing it. Maybe the easy way through UI is to use panels module, and then setup a two column layout, after that you can drag each webform into one if webform has a block display.
You can achieve the same thing through hook menu and do your own theming, but that will cost a bit more time, I guess.
This is old, but for anyone else that stumbles in here, just use CSS.
#media screen and (min-width: 719px) {
form#webform-client-form-30 {
width: 48%;
float: left;
}
}
Mobile first, so put them next to each other if the screen is > 719px. Add padding, margin, etc if desired.
I am using a nav walker to enable drop down menus using bootstrap in Wordpress, and it all works fine. What I am trying to figure out is there a way to disable the drop downs on mobiles, perhaps using media queries?
The reason I want to do this is because there are a lot of pages and some links are on a 3rd tier which flies off the mobile screen. The top level navigation have links to the sub menu items anyway, so in mobiles I would like to just have the top level items shown, and disable the sub menus from being displayed.
Also I am not using the nav collapse with icons, as I didnt want to use it on this project.
Yeah it can be done by Media Queries. This one targets mobile devices:
#media only screen and (max-width: 480px), only screen and (max-device-width: 640px) {
.navigation {display:none;}
}
Of course, you will have to keep an eye out for the sizes of the screens now days. One alternative solution would be in JavaScript, and check the userAgent:
if (navigator.userAgent.match(/(iPhone|iPad|iPod|Android|BlackBerry|webOS|Windows Phone)/i)) {
// I'm a mobile :-)
}
I have a responsive wordpress theme and have designed an image with a image mapped active area which when clicks reveals a content div.
When re-sizing window the active area moves (of course) as the image size and position is different. I have tried a plugin http://wordpress.org/extend/plugins/responsive-image-maps/ but this doesn't seem to work unless I am failing to interpret what I am supposed to do.
Below is the html and javascript call
<map name="circle"><area shape="circle" coords="58,290,53" href="javascript:unhide('welcome');"><div class="columns different sidebar right"><img class="scale-with-grid" src="../different.png" usemap="circle" /></div></a>
</map>
Any ideas where I should be putting the coords for the different media sizes? In the CSS, witihin the html calling the #media function?