New to responsive design, this is flying over my head. My site works perfectly on desktop, and it works fine when it is resized. The upper right menu is supposed to be hidden, but on mobile devices ONLY, is displayed when landing on the homepage.
Screenshot: http://fireflyaz.com/assets/templates/posterservice-html5/images/example.jpg
Live example (problem only on mobile device): http://www.fireflyaz.com/
In the default_modified.css, CSS for #showSlideMenu is set a width of 50%, so this shows up even when the sidebar is not open. Change the class name to #showSlideMenu.cbp-spmenu-open so the css would apply only when the sidebar is open. Your style would be as follows:
#showSlideMenu.cbp-spmenu-open {
float: right;
overflow: hidden;
text-align: right;
width: 50%;
}
Related
I have a problem with scaling leaflet map to fit mobile devices. I'm building an application using React, Leaflet(+React-Leaflet) & OpenStreetMaps.
If I'm placing component like footer or zoom control on the bottom of the screen, they appear either half or not at all, as they are hidden behind mobile devices menu.
Here's an example.
Web version
Mobile version
In this case, the zoom control component does not appear at all in the mobile version. If I change maps height property to 90vh for example, it appears again.
Mobile version with 90vh
Of course now it works, but looks ugly and isn't responsive. How can I fix this?
I have followed this example, but it doesn't seem to help.
I fixed this. In case this same problem occurs to someone else in the future, here is my solution.
When you are adding css properties to your Map component, rather than using "height: 100vh;", use "height: 100%;" like shown in this example. You should use a wrapper container set to position fixed, or absolute to get height 100% working correctly. Here is and example:
Rendering Map component
<div className="map-wrapper">
<Map/>
</div>
CSS
.map-wrapper {
width: 100%;
height: 100%;
position: fixed;
}
.map {
width: 100%;
height: 100%;
position: relative;
}
Product images are opening like direct link to image on mobile devices, or even in zoomed in browser, they should be opening in zoomcontainer like on desktop.
Wierdest thing is that, when i open my page on desktop on normal 100% zoom and zoom in to 300-400-500% it works perfectly, BUT when i refresh page on these zoom leves (page reloads already zoomed in) its not working at all, and images are opening like direct links to images.
I have no idea what even can cause this so i dont know what code to paste here, never experienced anything like this before.
Thank you for any help
You can check it here: https://winterland.sk/zimne-vychytavky/dotykove-rukavice
You have an additional div on top of your image id="#oknopredimg", so basically you click not image but that div. You can try to hide it.
#media (max-width: 1100px){
#oknopredimg {
height: 400px;
width: 100%;
background-color: #f000;
position: absolute;
z-index: 999;
display: none;
}
}
Same for other screens that you have #media (max-width: 992px)...
I developing a mobile website with angular-material which uses a floating button on the homepage as seen in many Google Applications. The button is always present and fixed in the right lower corner. It all works well. However, when I scroll the page and the browser address bar hides, the body height changes as well. The result is that the button moves up, too. See the images for better understanding.
This is the CSS of the button:
.floating-button{
position: fixed;
margin-top: 120%;
margin-left: 80%;
}
When i use top instead of margin-top, the button moves up and once the address bar is hidden, it jumpes back down.
Is there any possibility that the button will stay fixed? I would prefer not forcing the address bar to hide or stay fixed. Thanks in advance!
.floating-button{
position: absolute;
margin-top: 120%;
margin-left: 80%;
}
Try using the position absolute rule instead. Position absolute keeps an element on the page where you specify it independent of other elements.
I know this is an old question, but I came here with a similar problem and a combination of your question and what I already had solved my problem.
What I had is that the FAB would get hidden (move down) when the address bar is triggered and Kiko's answer didn't change that, so I assume it would bring my problem to your code.
For it to stop moving, I had to change my position: absolute to fixed like yours. The rest of the CSS is below:
.floating-button {
position: fixed;
right: 20px;
bottom: 20px;
}
I hope this helps future people passing by.
I’m not english speaker and I will try to explain my problem in the better way I can.
I’m designing my first responsive website using CSS.
Until now the things are going slow but fine.
My first test page is responding correctly in all widths of the desktop browsers, including narrowing them until its smaller width.
After this tests I loaded the page in my NOKIA 5800 smartphone that uses Symbian.
My main problem is the following:
The test page is loaded correctly in NOKIA 5800 smartphone and when I rotate the phone, the page adapts it internal elements to the new width.
It is OK, BUT… when I zoom the page (double clicking on the screen), the page is zoomed and the browser narrows AGAIN the internal elements to the new more narrow width and I dont want the page be responsive in zoom (FOR EXAMPLE: when the page is loaded at 320px width resolution)
I want the elements only be zoomed when I zoom the page. Am I explaining correctly?
My page appears to be so much responsive!!!!! :) or some thing is not working fine.
In other words…. even the page adapts the DIVs (etc) at the more narrow width on desktop browsers, the problem is when I zoom in smaller screens (smartphone), because some elements are additionally narrowed and it is so much .
I used several variations of tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
... but this kind of smartphone stills adapting the widths when zooming the page.
Some thing is not working.
I limited the body to zoom: 1 in the CSS
Body width is set in 100% for all resolutions.
I need that when zooming (scaling) the page, these widths dont be modified.
Before destroying my smartphone :) I ask…
Is there some way in CSS to avoid the responsive effect when I zoom?
I don't know what more I can do.
I hope I have explained this issue clearly so that someone can help me.
These are the main parts of the CSSs
in Main CSS:
body {
/*background-color: white;*/
background-image: url('images/background_pages_gris-ruido.jpg');
line-height: normal;
color: black;
z-index: 1;
width: 100%;
zoom: 1;
display: block;
}
In MEDIA Css:
#media screen and (min-width: 961px) and (max-width: 1152px){
body {
background-color: transparent;
line-height: normal;
}
#DIV_GLOBAL {
width: auto;/*950px;*/;
display: table;
float: none;
background-color: transparent;
margin: 0px auto 20px auto;
}
Now I revised the test page using an iPad and a Samsung Galaxy S3 smartphone. In these devices the page can not be zoomed.
The problem is with smartphones like my Nokia 5800. Is there some way to avoid responsive effect when zoom?
I hope these data can be enough to analize. Thank you! GusSiglo21
I'm having a slight issue with my width=100% css rule. On desktop browsers it's fine, however on mobile, it only uses 100% of the device width. So On a phone I'll end up have a div that spans 480px rather than across the entire horizontal screen.
Thanks for your help!
#intro {background-color: #1F1F1F; width: 100%; margin: auto; display:block;}
#intro-inner {height:450px; width:1105px; padding-top:50px;display:block;margin:0 auto;position:relative;}
On the HTML page, the intro inner div is inside the intro div. The background color is blue. On a desktop the site appears fine. However on a mobile after the devise width, ex. 480px, the #intro div background and it's color ends.