1
0
mirror of https://github.com/webslides/WebSlides.git synced 2025-08-16 10:04:45 +02:00

Fixing index responsive slide sizes

This commit is contained in:
Luis
2017-07-15 14:28:44 +02:00
parent c109276ef6
commit 0e0b2b4160
4 changed files with 17 additions and 17 deletions

View File

@@ -41,12 +41,12 @@
position: relative; position: relative;
width: 25%; width: 25%;
@media screen and (orientation: portrait), screen and (max-width: 768px) and (orientation: landscape) { @media screen and (max-width: 567px) {
width: 50%; width: 100%;
} }
@media (max-aspect-ratio: 2 / 3) { @media screen and (min-width: 568px) and (max-width: 1023px) {
width: 100%; width: 50%;
} }
> .wrap-zoom { > .wrap-zoom {
@@ -56,12 +56,12 @@
position: relative; position: relative;
transition: .3s; transition: .3s;
@media screen and (orientation: portrait), screen and (max-width: 768px) and (orientation: landscape) { @media screen and (max-width: 567px) {
height: 50vh; height: 50vh;
} }
@media (max-aspect-ratio: 2 / 3) { @media screen and (min-width: 568px) and (max-width: 1023px) {
height: 50vh; height: 33vh;
} }
&:hover { &:hover {

View File

@@ -1,7 +1,7 @@
/*! /*!
* Name: WebSlides * Name: WebSlides
* Version: 1.3.1 * Version: 1.3.1
* Date: 2017-07-14 * Date: 2017-07-15
* Description: Making HTML presentations easy * Description: Making HTML presentations easy
* URL: https://github.com/webslides/webslides#readme * URL: https://github.com/webslides/webslides#readme
* Credits: @jlantunez, @LuisSacristan, @Belelros * Credits: @jlantunez, @LuisSacristan, @Belelros
@@ -2911,12 +2911,12 @@ Solution: stackoverflow.com/questions/34250282/flexbox-safari-bug-flex-wrap
order: 0; order: 0;
position: relative; position: relative;
width: 25%; } width: 25%; }
@media screen and (orientation: portrait), screen and (max-width: 768px) and (orientation: landscape) { @media screen and (max-width: 567px) {
#webslides-zoomed > .wrap > .grid > .column {
width: 50%; } }
@media (max-aspect-ratio: 2 / 3) {
#webslides-zoomed > .wrap > .grid > .column { #webslides-zoomed > .wrap > .grid > .column {
width: 100%; } } width: 100%; } }
@media screen and (min-width: 568px) and (max-width: 1023px) {
#webslides-zoomed > .wrap > .grid > .column {
width: 50%; } }
#webslides-zoomed > .wrap > .grid > .column > .wrap-zoom { #webslides-zoomed > .wrap > .grid > .column > .wrap-zoom {
display: inline-block; display: inline-block;
height: 25vh; height: 25vh;
@@ -2924,12 +2924,12 @@ Solution: stackoverflow.com/questions/34250282/flexbox-safari-bug-flex-wrap
position: relative; position: relative;
-webkit-transition: .3s; -webkit-transition: .3s;
transition: .3s; } transition: .3s; }
@media screen and (orientation: portrait), screen and (max-width: 768px) and (orientation: landscape) { @media screen and (max-width: 567px) {
#webslides-zoomed > .wrap > .grid > .column > .wrap-zoom { #webslides-zoomed > .wrap > .grid > .column > .wrap-zoom {
height: 50vh; } } height: 50vh; } }
@media (max-aspect-ratio: 2 / 3) { @media screen and (min-width: 568px) and (max-width: 1023px) {
#webslides-zoomed > .wrap > .grid > .column > .wrap-zoom { #webslides-zoomed > .wrap > .grid > .column > .wrap-zoom {
height: 50vh; } } height: 33vh; } }
#webslides-zoomed > .wrap > .grid > .column > .wrap-zoom:hover { #webslides-zoomed > .wrap > .grid > .column > .wrap-zoom:hover {
-webkit-transform: scale(1.02); -webkit-transform: scale(1.02);
transform: scale(1.02); transform: scale(1.02);

View File

@@ -1,7 +1,7 @@
/*! /*!
* Name: WebSlides * Name: WebSlides
* Version: 1.3.1 * Version: 1.3.1
* Date: 2017-07-14 * Date: 2017-07-15
* Description: Making HTML presentations easy * Description: Making HTML presentations easy
* URL: https://github.com/webslides/webslides#readme * URL: https://github.com/webslides/webslides#readme
* Credits: @jlantunez, @LuisSacristan, @Belelros * Credits: @jlantunez, @LuisSacristan, @Belelros

View File

@@ -1,7 +1,7 @@
/*! /*!
* Name: WebSlides * Name: WebSlides
* Version: 1.3.1 * Version: 1.3.1
* Date: 2017-07-14 * Date: 2017-07-15
* Description: Making HTML presentations easy * Description: Making HTML presentations easy
* URL: https://github.com/webslides/webslides#readme * URL: https://github.com/webslides/webslides#readme
* Credits: @jlantunez, @LuisSacristan, @Belelros * Credits: @jlantunez, @LuisSacristan, @Belelros