I'm working on a mobile website. This particular page includes a giant red circular hero button. I'm struggling to find a way to make it properly responsive. If you make it one size, it fits iPhone 5 nicely, but the same size pushes the rest of the page off the screen for iPhone 4. The iPhone 4 size just makes it look terrible and be too small on iPhone 5.
So the behaviour that I'm looking for is this:
The hero button should get bigger in radius as the screen gets bigger
The hero button should not push any other elements off the screen or render wider than it's container.
The other parts of the page are a fixed size and layout and should stay that way.
I've used Flexbox for similar constraints in the past, but it doesn't seem to be fitting the bill here. When I make the container of the hero button a flexbox, it does not increase in height, and I have no idea how to make the width correspond.
How can I make the button expand to fill the available screen space?
You can use jquery to do this.
get the screen size by using $(window).height() and $(window).height() and set the size of your button accordingly
Related
By the way I'm using Native Base for the card components, and react-native-responsive-grid for the grid.
http://prntscr.com/kbi48m
Here's the code chunk. Basically it sets up a horizontal box (Row) that has two columns in it. Each column has one card component in it. If the screen is <= small size, the columns get a width of 99% of the screen and stack on top of one another. If the screen is big enough, both column get rendered side by side with a width of 50% each.
When in landscape view, the sizing of the Card component vertically appears normally (I manually set width of card to 100% so it takes the full width of it's container). (It's just as big as it needs to be to fit the text field inside: http://prntscr.com/kbi5q4
In portrait mode, suddenly the cards get a massive height. Much taller than the child elements need: http://prntscr.com/kbi6o7
I tried to hard code the height of the cards which works fine for either landscape, or portrait, but not both. Ive never seen a parent component give a ridiculous amount of extra spacing on one side of its child like this before.
Any insight?
I have a bunch of card divs inside a flex container.
When clicked the card should scale to be full screen (not fully fill the container, but really full screen, relative to the body/html).
If the devices width is smaller than its height the card should also rotate(90deg).
I tried this:
http://codepen.io/anon/pen/ENyVzm
I think setting the width and height is not gonna work, since it will disrupt the flex layout.
I should instead scale the card to be fullscreen. Scale does not affect the flex layout as it only renders the visual representation and not the flow.
For that to work the card must be rendered (when in non-full screen mode) in the same aspect ratio as the device since we can only scale one factor and not scale width and height individually.
Are my thoughts correct or is there an easier way to accomplish that?
I want my Navbar breakpoint after it comes from large to
medium screens. Could anyone explain to me how to exactly do so in code?
This is mentioned on bootstrap site on Overflowing Content
Since Bootstrap doesn't know how much space the content in your navbar needs, you might run into issues with content wrapping into a second row. To resolve this, you can:
Reduce the amount or width of navbar items.
Hide certain navbar items at certain screen sizes using responsive utility classes.
Change the point at which your navbar switches between collapsed and horizontal mode. Customize the #grid-float-breakpoint variable or add your own media query.
This is mentioned on Bootstrap for mobile navbar breakpoint
Changing the collapsed mobile navbar breakpoint. The navbar collapses into its vertical mobile view when the viewport is narrower than #grid-float-breakpoint, and expands into its horizontal non-mobile view when the viewport is at least #grid-float-breakpoint in width. Adjust this variable in the Less source to control when the navbar collapses/expands. The default value is 768px (the smallest "small" or "tablet" screen).
So I've spotted a few sites lately where the background above the fold always perfectly crops to the viewport. For example - if you look at http://startbootstrap.com/templates/grayscale/ or http://simplesimple.co/currency/ on a mobile, tablet or desktop device the background image always fills the viewport even at different orientations.
It's not as simple as adding a max-width: 100% to the image as this would only fill horizontally. My first thoughts are that it is the art-direction use case, where breakpoints target different crops of the image. It seems like a lot of work to achieve this effect though so I wonder if I'm missing something.
With reference to http://startbootstrap.com/templates/grayscale/, the main banner image has been added as a background image and its background-size property has a value of cover which will stretch the image to fit the screen at any size.
Then there's tricks like setting the main section tag to have a display property set to table which allows its child div (containing title and sub title) to be vertically centered with display: table-cell and vertical-align: middle
Its built on twitter bootstraps framework which has grids and media queries built right in allowing for different images to be added via the background-image property for each screen size
I am going to develop a web page for Mobile. I need to resize window element with width of screen.Suppose I create a form with some text fields. It display fit when width of screen is wide. But if screen has long hight and less width then form element (text box,label etc) are overlapped or hide with few corner part.
How I can do like this if I resize screen to smaller then displaying HTML element should be smaller automatically to fit with screen size.
Please give your suggestions.
Thanks,
Deepak
The best solution is to use media queries
With them you can apply separate styles for different device widths and make sure that all your pages(and forms) look pretty on every screen.
That will also help to avoid distortion of the page or making the text unreadable small, which might occur when you'll try to squeeze a page designed for a wider screen to a narrow mobile device.
I suggest you to use Percent dimensions and box-sizing: border-box;