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.
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;
}
I have read Antd's layout design documents and the docs on Grid and Layout. What I don't understand is how to accomplish the following design in Antd:
I'd like my app to have a single centered column.
On a wide screen (landscape clients), the center column should be fairly narrow. In terms of grid, maybe 8 units.
On a narrow screen (portrait clients), the center column should use a relatively large
width. In terms of grid up to 24 units in case of very narrow/small screen sizes.
Basically this sounds like I'm looking for the good old container with a max width. I could obviously come up with some custom CSS to style a custom <div>, but this makes me wonder:
Am I missing something, or is there really no way to achieve that with Antd's layout system natively?
If so, am I doing something wrong in terms of modern UI design philosophy?
We have done this. Not exactly via Ant Design, but used a lot of Ant Design inside this.
I am not sure what other solutions are, but this is how we did it. The container you talked about was the parent container of our website, with everything else rendered inside this.
We created a routing inside the main container (as bottom tabs, so was convenient for us) and set its max-width to 420px. Since everything was contained in the bottom tabs, our app was centered when on landscape clients, and looked to fill the width on portrait mode.
Code for clarity. (its a react app)
App Container CSS:
.App {
text-align: center;
height: 100vh !important;
}
Parent Container CSS:
.parentcontainer {
height: calc(100vh - 50px);
max-width: '100%';
display: inline-block;
width: 100vw;
}
Tab CSS:
position: 'fixed',
padding-bottom: '10px',
bottom: '0',
width: '100%',
max-width: '420px',
This worked for us, and the behavior is what you desire.
I'm working in web project(Angularjs) and facing one problem. I have given height: 80% and my screen resolution is 1280 x 1024. but when I opened same project in my laptop(Resolution 1386*768) Div get invisible. I have tried following code
#media (min-height: 500px){
#chatViewList
{
overflow-y: auto;
position: relative;
height: 80%;
}
}
Please suggest andd help me.
Is the height of the parent element fixed? If not you can't use a percentage based height (there are some exceptions but they're unlikely to be practical).
I would suggest using the viewport height unit instead. vh allows you to specify a height in relation to the viewport window.
#media (min-height: 500px) {
#chatViewList {
height: 80vh;
overflow-y: auto;
position: relative;
}
}
Browser support: http://caniuse.com/#search=vh
VH is what you need!
height: 100vh; = 100% of device height
You can of course use like 80vh for 80% of the device height. VH means viewport height
You can set the responsive height of a div when it's part of a parent div that has a defined height.
Or, You can pre-define the height of the div or dynamic specify static values based on various commonly available heights <-- could be an overkill but can work.
Alternatively, try the following links"
https://www.sitepoint.com/community/t/how-to-make-div-height-responsive/30438
OR
http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height
Its not best practice to create media queries to resolution height. how ever as you asked here I guess you trying to create full screen web page. to make it work set you html tag and body tag height 100%
ex:
html, body {
min-height: 100%;
hight: 100%;
}
like this what ever resolution you working on web page hight will remain 100%. then add CSS height as percentage as you wish. And also make sure you set min-height and max-height to all.
This is a little trick that I am using when creating full screen web pages
Hope this will help
for calculating the screen height for every screen we can use this formula.
height:calc(100% - 200px);
which calculate the height and subtracts 200px from it.
we can use any value in place of 200px
example
#div1 {
height:calc(100% - 200px);
}
if the screen size is 1000, Resulting div1 height will be 800
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%;
}
There are 2 pages, that some part of the code is repeated, to this part of code, I apply this CSS:
#media (max-width: 767px) {
.sliderContent {
width: 100%;
}
}
When I check one page on an iPhone, it loads this CSS, but the other does not use this style.
I have added an alert with the screen size in both pages, and both have the same width.
Do you know where the max-width is taken? that could be making the difference between the two pages?
Can the HTML somehow affect the size of the min-width?
Max width is the width of the viewport in css pixels. What that declaration is saying is that when the viewport is less than 767px width, apply the .sliderContent style.
The reason it applys to the iPhone is that the reported width is less than 767px. If you were to open the page in question in a newer browser (IE9+, Chrome, Firefox, etc), and resize the window below 767px you'll see the same result.
https://hacks.mozilla.org/2013/09/css-length-explained/