My website is www.to-hawaii.com
When you see the site on mobile the left panel with the ads shifts all the way to the bottom of the site.
On each page the left panel is generated by an include file and when the site is viewed on mobile it shifts under the content. The structure of the site is:
<div class="contentarea">
<div class="rightpanel"></div> / Even though it is called Right Panel this is actually the left panel
<div class="midpanel"></div>
<div class="leftpanel"></div> / Which is actually the right panel
</div>
Is it technically possible, without changing the whole structure of the site, to do the following change on mobile - to be included at a specified location on the page, for example under the photo gallery instead of this panel to show on the bottom of the page?
Base on your structure, i think that wouldn't do. To achieve what you want, make a Copy of the div you only want to show on mobile then hide the main div which is for non-mobile through CCS3 #media rule.
Example you want to add the mobile version of rightpanel below the gallery
<div class="gallery-container"></div>
<div class="rightpanel_mobile"></div>
Then manipulate the css...
<style type="text/css">
#media (max-width: 768px) {
.rightpanel { //Main
display: none;
}
.rightpanel_mobile { //Mobile
display: block;
}
}
</style>
Related
Is it possible to have a side navigation menu transition in from the left whilst pushing other content along with an opaque colour overlay?
Versions that I've tried to do work perfectly in browsers on desktop, but when I switch to mobile, the sidebar extends the height of the page and the page loses its flow.
Example: updated https://www.codeply.com/p/RRVDkqEyj4 - when I view the page through Codeply on a mobile device, it works perfectly. However, this is how the left menu displays on mobile devices only when it is uploaded to my website. Also, if I make the left menu transition in from the right-hand side, that also works perfectly and the menu doesn't scale larger... It's just something to do with it transitioning in from the left.
Edit: Codeply link has updated code.
Edit: My issue has now been resolved.
The problem is that you are applying a transformation to the #mainWrapper (translateX(80%)) and that affects the position:fixed elements inside it as well.
You could either re-style you whole page to make sure the #mainWrapper element reaches all the way to the bottom of the page, or you could move the overlays outside of the #mainWrapper.
Just moving the two overlays outsite
change
<div class="main-wrapper" id="mainWrapper" style="height: 100vh; width: 100vw;">
<div class="service-menu-overlay" id="serviceMenuOverlay" onClick="closeServices()"></div>
<div class="burger-menu-overlay" id="burgerMenuOverlay" onClick="closeBurger()"></div>
to
<div class="service-menu-overlay" id="serviceMenuOverlay" onClick="closeServices()"></div>
<div class="burger-menu-overlay" id="burgerMenuOverlay" onClick="closeBurger()"></div>
<div class="main-wrapper" id="mainWrapper" style="height: 100vh; width: 100vw;">
and
.service-menu-overlay.overlay-show{z-index: 5000 !important;}
to
.service-menu-overlay.overlay-show{z-index: 1 !important;}
should fix most problems.
I am implementing two header menu in one .jspf file. One header menu for mobile screen and another one is desktop screen. But problem is that when load the page then all links load for small screen header menu and desktop screen header menu. When page is load in mobile screen then i don't want to load desktop header menu screen links.
Right now i am using media query for hide the header for small screen and desktop screen.
I have another idea for hide and display to the header i.e javascript.
$(document).ready(function () {
var windowViewWidth = $(window).width();
if (windowViewWidth <= 767)
{
.........
.........
}
});
One mobile screen header menu screen shot:
When i am see view page source code then load all links. I tried Java script width property and media queries. Still it is not working. When i see page source code for small screen then should not show desktop header menu screen links in source code.
Any one have some different idea please with with me.
Could you have the same css for your header (mobile and desktop) in a media query and the CSS used for the header changes depending on screen size? So the header css would be using the same attributes and html for both, but just changing at the time of the media query criteria being true?
header{
height: 40px;
width: 500px;
background: gold;
}
#media screen and (max-width: 480px) {
header {
height: 300px;
width: 100px;
background: lightgreen;
}
}
<header>
<header>
For clear view i have drawn three diferent images showing my status of divs in desktop, in mobile view and what i'm trying to get in mobile view.
1. This is current status of divs in desktop view.
HTML
<div id="wrapper">
<div id="left-nav">recent posts</div>
<div id="main">articles listing</div>
</div>
2. What i get after media query for mobile device making both divs full width.
3. And this is what i'm trying to get
Solution i come up with are placing divs changing position in html with floating property like below.
<div id="wrapper">
<div id="main" style="float:right;">articles listing</div>
<div id="left-nav" style="float:left;">recent posts</div>
</div>
And this works, on mobile view after clearing floats. But this is in some CMS so i wish to get it with css if possible other way around.
Problem : as i make both div of full width (in mobile with media queries) then, the recent articles div appears first and then article listing but how can i get Articles listing first then after recent posts ?
You have some options depends on what browser do your client want to use:
For older browsers, according to this answer you can use table layout to reorder your divs:
#wrapper { display: table; }
#firstDiv { display: table-footer-group; }
#secondDiv { display: table-header-group; }
For newer browsers you can use FlexBox to specify order
#wrapper { display: flex; }
#firstDiv { order: 1; }
#secondDiv { order: 2; }
I'm working in a website for mobiles, tablets and desktops. This website in its desktop layout has a carousel that it is defined in the html like this:
<div id="carousel">
<div class="carousel-slide carousel-slide-active">
</div>
<div class="carousel-slide">
</div>
</div>
Class carousel-slide define an slide of the carousel, and carousel-slide-active, the slide being showed at the moment (controled by Javascript).
For the mobile layout, I don't want to show this carousel. My idea is to show just the first slide (each slide is basically a background color and an image). The question is, how can I do this? Actually I'm using CSS media queries to rearrange all the elements in each device but I don't know how to hide all unused slides and disable the Javascript (this javascript controls the background code (random) and the positioning). Which is the cleanest way to replace the carousel with a simple div with the image and a random color?
You can't disable the JavaScript unless your carousel plugin has a built-in method for it. If it doesn't have that, there is just no way.
Assuming all of the carousel slides actually appear inside of the carousel-slide-active div, you can do something like this:
#media screen and (max-width: 700px) {
.carousel-slide {
display: block;
}
.carousel-slide.carousel-slide-active: {
display: none;
}
}
This will make sure your "active" div is hidden and the other one is displayed. All html elements inside of the active div will also be hidden because their parent is hidden.
You can potentially add the !important flag to those css properties if you need to override some styles being created by the JavaScript. In that case it would look like this:
#media screen and (max-width: 700px) {
.carousel-slide {
display: block !important;
}
.carousel-slide.carousel-slide-active: {
display: none !important;
}
}
I have an ASP.NET website divided in tabs like this
|TITLE1| - |TITLE2| - |TITLE3| - ETC.
If user clicks on Title 2, only the div corresponding to title 2 shows under, and so on.
I made a print image button but i'd like to make it so that it print as if all tabs were opened stacked one over another. Right now, it only prints that tab that was clicked.
You will need to render the contents of all your tabs into a div which has a css media print rule associated with it. Your actual tabs also need another css rule which will hide them for printing.
So for example you have
<div id="tabs" class="print_hidden">
Your actual tabs go here
</div>
<div id="printTabs" class="screen_hidden">
Your printer friendly text goes here when the link below is clicked.
</div>
<asp:LinkButton runat="server" id="lnkPrinterFriendly">Printer-friendly view</asp:LinkButton>
Then in css file you have the following:
#media print {
.screen_hidden { display: none; }
}
#media screen {
.print_hidden { display: none; }
}
Use a print stylesheet which has all the tabs (which I assume would be in div elements) set to display: block.