I'm using Bootstrap MVC and have a 3 column layout for the index page for a internal blog. Small left hand column which shows pics, blogs in the middle and useful widget in the small right column.
When you view the site on a mobile device it all moves as it should but I would like the left column to move after the main blog column only for a mobile device. Is this possible I found the push and pull commands but it dosnt do it for just mobiles?
Cheers
What I would do is either use the default media queries in your own css files. These are the ones that bootstrap uses:
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
#media (min-width: #screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
#media (min-width: #screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
#media (min-width: #screen-lg-min) { ... }
or depending on your layout you may want different break points. You would just either use id's for those columns or add classes to get the behavior that you want.
Hope it helps!
Related
I have a minimal app with basic views, texts, images and buttons in react native. The problem I am facing, is in managing layout for multiple devices.
Any suggestions on how can I maintain a same (proportionate) view & font size for multiple devices (multiple screen resolutions and screen sizes).
View:
For example, if I want a list view of items, where each row has one image on the left, some text in between and 2 buttons on the right (one below the other i.e. flex-direction: 'column'), how can I have this look good on a 5" device as well as a 10" device?
Also, consider the buttons have some borderRadius, if we are scaling the buttons, the borderRadius value will also need to be increased. How do I achieve this?
Fonts:
I have tried using PixelRatio.getFontScale() but this scales the font depending on only the resolution (from what I understood). Using this, makes a font of size 12 look bigger on a 5" device with higher resolution and smaller on a 10" device with lower resolution. So how can I manage font sizes for the react native app?
In addition to the PixelRatio.getFontScale() you can also use the Dimensions API to get the height and width of the window, and scale your components relative to that. I have built an app that runs on both iOS and android and use this to scale width's + heights.
Checkout the link Dimensions # Facebook - React Native
ie.
Dimensions.get('window').width;
Dimensions.get('window').height;
Will return you the size of the window
How about this library? react-native-scaled-layout
You can use scaled dimensions for your layout margin, height, padding ...
(36).scaled() /* or */ (36).d()
(36).widthScaled() /* or */ (36).w()
(36).heightScaled() /* or */ (36).h()
(24).fontScaled() /* or */ (24).f()
style={{
width: (100).w(),
height: (210).h() + safeAreaBottom,
borderRadius: (16).d(),
justifyContent: 'center',
paddingBottom: safeAreaBottom + (24).h(),
}}
How do I turn off or hide the "More Options" item in the Azure Media Player controls menu?
I still need the other controls, so disabling the entire control bar is not an option.
Currently Azure Media Player does not have any API to turn off the more options menu as it is used to house the buttons when the control bar is too small to correctly display this.
You can however hide this button with some simple CSS:
<style>
.amp-moreoptions-control{
display:none;
}
</style>
You can also add new ideas or requests for Azure Media Player here:
http://feedback.azure.com/forums/293565-azure-media-player
Pass a custom plugins > controlBarIcons object on the amp consturctor options works well too, like:
plugins: {
controlBarIcons: {
leftIcons: ["playToggle", "previousTrackButton", "skipBackwardButton", "rewindButton", "fastForwardButton", "skipForwardButton", "nextTrackButton", "playbackSpeedButton", "liveDisplay"],
middleIcons: ["liveIndicator", "currentTimeDisplay", "timeDivider", "durationDisplay", "volumeMenuButton"],
rightIcons: ["shareButton", "castToDeviceButton", "audioTracksButton", "subtitlesButton", "captionsButton", /*"qualityButton",*/ /*"moreOptionsButton",*/ "fullscreenToggle"],
removeOtherIcons: ["qualityButton", "moreOptionsButton"]
},
}
You must put the icons that u don't want to be displayed on the "removeOtherIcons", futhermore this allow you to change the order or or move the icons to other bars.
I'm relatively new to Susy and responsive design. I've managed to setup my grid and using at-breakpoint(), I've made the page fully responsive as required first by testing it while resizing the browser window, and then testing it on the actual mobile devices (phones and tablets). I encounter a problem with the iPad as requires an extra orientation rule (orientation: landscape) in the media query. What's the workaround here, is there a way to include it in the at-breakpoint rule or I'll have to make up a separate media query just for this case?
Here's my grid setup:
$total-columns: 4;
$column-width: 60px;
$gutter-width: 20px;
$grid-padding: $gutter-width/2;
// alternative layout breakpoints
$tablet-small: 6;
$tablet: 8;
$computer: 12;
And when dealing with the sidebar and the page body, first I display them as block elements to fill the entire page horizontally, and after the breakpoint I make them behalf as columns like so:
#sidebar {
#include at-breakpoint($computer) {
#include span-columns(3, $computer);
}
} // sidebar
#page-body {
#include at-breakpoint($computer) {
#include span-columns(9 omega, $computer);
}
} // page-body
How should I alter the code so that it keeps the variables for the breakpoints and just add the orientation rule? Thanks!
If you want to target specific device, I think it's better to specify the width.
So instead of $computer: 12; maybe do $computer: 48em 12;
Once the min-width: 48em; is reached, it will change the layout to become a 12 column grid.
something like this SHOULD work:
$device-lrg-landscape: max-device-width 480px, orientation landscape
#include breakpoint($device-lrg-landscape)
I have an Android mobile app created with jQuery Mobile and PhoneGap. I would like to have 3 separate layouts depending on device and orientation:
Portrait phone - on smartphones I want to use always portrait layout
Portrait tablet - different than on phone
Landscape tablet
Is this possible to achieve with CSS media queries? I know changing layouts is possible, but not sure how to force portrait layout only for smartphones and at the same time allow landscape for tablets.
Most of the devices would come under the following 3 resolutions
1) HVGA-Half of VGA (320 x 240) 2) WVGA- wide VGA(800x 480) - nearly 1.5 times of HVGA 3) HVGA 2x- (640 X 960) - IPHONE 4 uses this resolution
for your requirements
1) & 2) you can write your styles inside #media as below. you can use HVGA or WVGA. Change width and height as per your need
#Media screen and (min-width: 320px) and (max-width: 480px){
/* css files here*/
}
3)For a landscape view use orientation:landscape like in below example
#media only screen and (-webkit-min-device-pixel-ratio: 2) and (orientation:landscape){
/* css files here */
}
The code piece is just for your reference . Your needs may be different, Please change parameters like screen/only ,min-device-pixel-ratio, max-device-pixel-ratio etc as per your needs
I have applied body-background color(ex:blue) to my page. But when i open this page in tablets, mobile devices the color should change to orange color. when i resize my pc browser window the colors wont be change. Is it possible?
You can change the width by changing the CSS tag; but that changes across all devices.
#media only screen and (max-device-width: 1440px) {
To determine if its a tablet or what device the user is using specifically you can use Javascript to determine the device. Then load CSS accordingly.
You can look at the code here; [link]http://davidwalsh.name/detect-ipad[/link]
The problem with that is there is thousands of devices out there. So you'll have to check for each device.
// For use within normal web clients
var isiPad = navigator.userAgent.match(/iPad/i) != null;
// For use within iPad developer UIWebView
// Thanks to Andrew Hedges!
var ua = navigator.userAgent;
var isiPad = /iPad/i.test(ua) || /iPhone OS 3_1_2/i.test(ua) || /iPhone OS 3_2_2/i.test(ua);
Have you attempted a CSS3 Media Query; as posted below?
/*Common Tablet Width*/
#media only screen and (max-device-width: 1024px) {
body{
background-color:blue;
}
}