I'm using React confirm alert library for a delete confirmation but how do I make it responsive for all screens view?
For a laptop and tablet it's working fine
How do I make it responsive in mobile too?
To make a React confirm alert responsive on mobile, you will need to use media queries in your CSS to apply styles that are specific to mobile devices.
#media only screen and (max-width: 600px) {
.confirm-alert {
/* Add width or height for example */
}
}
Related
I'm doing responsive web design. When I shrink the screen down to tablet mode and click some buttons, certain CSS properties are applied(things are moved around and others are hidden). Then when I enlarge the screen back to its desktop size. I want the properties to go back to the desktop version. How would I achieve that?
The current behavior is that the effect of the button remains when I go back to the desktop screen ratio.
The expected behavior is that when I go back to the desktop screen ratio, the CSS for desktop applies.
You can access certain properties such as window.innerWidth which you can check to decide whether to run your function or not.
That's for JavaScript. If you want your CSS to be responsive to screen size, check media queries, for example:
#media (min-height: 680px) {
.someClass {
margin: 5px;
}
}
You can use CSS media queries.
#media screen and (max-width: 600px) and (min-width: 300px) {
/* CSS for screen width between 300 and 600px */
}
With JavaScript, you could listen for the resize event.
window.addEventListener("resize", function(e){
console.log(window.innerWidth);
});
I've ran into an interesting problem. On my website I have two versions of navigation bar for mobiles - landscape and portrait. To detect these two I use CSS media orientation.
#media (orientation: landscape)
{
/* inline menu */
}
#media (orientation: portrait)
{
/* multiple rows menu */
}
However, when I open my keyboard page turns into landscape, because the actual page size becomes smaller. Can someone help me how to fix this? All I can think about is focus event on inputs, so whenever they're focused the portrait manu is turned on, but it would change the menu even on landscape.
Here's an illustrative image
Thanks!
If you check Media Queries W3C Recommendation
You will find this interesting sentence:
The ‘orientation’ media feature is ‘portrait’ when the value of the
‘height’ media feature is greater than or equal to the value of the
‘width’ media feature. Otherwise ‘orientation’ is ‘landscape’.
So, when the keyboard is opened, your page turn into landscape mode.
There are multiple ways to overcome this problem, you can
check this answer.
You should ignore the height/orientation completely. Something like this:
#media (max-width: 480px)
{
/* inline menu */
}
#media (min-width: 481px)
{
/* multiple rows menu */
}
I'm currently using the following code in DIVI to detect a mobile browser so that some features are turned off, by adding notonmobile to the CSS Class
#media screen and (max-width: 600px)
{
.notonmobile {display: none;}
}
However I would like to be more specific due to the resolutions of devices and some functions do not work on mobile devices, I found a jQuery here http://detectmobilebrowsers.com/
Is there a simple way to merge the 2 so that if the query is true (mobile based browser) then the notonmobile value will work in the class??
Thanks
I've created an app using Javascript / CSS and HTML, just a simple game, nothing special.. however, when I run the game in xcode (iphone5 simulator) it runs fine, no problems and on an actual iPhone5 device using the ad-hoc method via my Apple Dev Account, but when I try it on the iPad mini and iPad 3 the game only show's up in the top left hand corner inside a what can only be described as an iphone5 size screen. Question is, how using either JS, CSS or HTML do I tell the app (in xcode6) to resize to a device bigger than iphone5.. basically how do I tell the app to resize depending on device, I want to launch the game (hopefully!) for iphone5, 6 and all iPads of course.
I'm using xcode6 and iOS8
Many thanks in advance for any help given.
Would be happy to screenshare over Skype if this is easier to do? (Let me know)
The problem was iPhone has smaller width compare to iPad. You have develop an app for iPhone , so when u simulate it on iPad i only takes width upto 586px or 320px not all iPad width. This width can be adjusted by using media queries.
Add the following media queries with your stylesheet.
Use CSS media queries as follows
html
{
//default styles as you have used(for iPhone 5 as you said)
}
body
{
//default styles as you have used
}
.contianer(wrapper)
{
//default styles as you have used
}
//media queries for iPad
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
{
/* STYLES GO HERE */
//use width upto 768px
}
//media queries for iPad mini
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1)
{
/* STYLES GO HERE */
}
Use proper width upto 1024px to 768px as it can match with iPad and you can get your app viewable for iPad.
Go to this Link for iphone and ipad styles.
I´m using zurb foundation to create a responsive website. When i resize my window the grid changes to the mobile mode, it´s normal behavior. Is there any way that when i resize the window the website stays put and the browser only adds a scrollbar?
I still need the mobile version to exist, for mobiles only, and i have already try to use min-width to set the point where the scrollbar is added.
Does any one have any idea how to do this?
EDITED
I have the folowing media query:
#media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {}
And in the html i have elements whith the folowing class:
small-block-grid-1 large-block-grid-3
In the css file change the media query to max-device-width to target devices only.
I hope this helps :)