Breaking points

[Mobos]

Hi Adobe community,

I have an other question about the intro of the site EVISSI  On desktop/phone/tablet I made various versions, just images or a 'movie'. On tablet landscape none of them is visible (movie doesn't work and the images aren't yet visible, because it's to wide), so I would like to change the breaking points http://evissi.com/css/style-intro.css

Does someone have any idea where  I can change the breaking points?

(Of course I tried some things, but it didn't work, so I probably didn't do the right thing.)

[osgood_]

Try the below combination for your mobile presentation:

<div class="fluid IntroIndex hide_desktop">

<div class="evissi_logo_wrapper">

<img src="http://evissi.com/imgs/intro-mobile-logo.jpg" alt="evissi"/>

</div>

<!-- end evissi_logo_wrapper -->

<div class="mobile_product_wrapper">

<a href="cactuswater/index.html"><img src="http://evissi.com/imgs/intro-mobile-cactus.jpg" alt="cactus water"/></a>

<a href="coconutwater/index.html"><img src="http://evissi.com/imgs/intro-mobile-coco.jpg" alt="coconut water"/></a>

<a href="watermelonjuice/index.html"><img src="http://evissi.com/imgs/intro-mobile-melon.jpg" alt="melon juice"/></a><br>

<a href="aloeverajuice/index.html"><img src="http://evissi.com/imgs/intro-mobile-aloe.jpg" alt="aloe vera juice"/></a>

</div>

<!-- end mobile_product_wrapper -->

</div>

<!-- end fluid introIndex hide_desktop -->

Then add the css below at the very end of all the other css styles:

@media screen and (max-width: 1000px) {

.container {

display: none;

}

.hide_desktop {

display: block;

}

.evissi_logo_wrapper {

text-align: center;

background-color: #5FA439;

}

.evissi_logo_wrapper img {

width: 70%;

height: auto;

}

.mobile_product_wrapper {

display: flex;

flex-wrap: wrap;

}

.mobile_product_wrapper a {

width: 50%;

}

@media screen and (max-width: 768px) {

.mobile_product_wrapper a {

width: 100%;

}

}

[Mobos]

I published it at  EVISSI :: The Plant Based Beverage Company   with the http://evissi.com/css/style-intro02.css  but it still doesn't show at my iPad on landscape.

[Mobos]

Hi Osgood, thanks for your attention at my question and your answer!

I tried it and posted it at EVISSI :: The Plant Based Beverage Company  with   http://evissi.com/css/style-intro02.css but it still doesn't show on my iPad landscape.

[osgood_]

So exactly what are you seeing on your iPad in landscape?

Maybe try the media query below to target iPads.

CSS Media Queries for iPads & iPhones | Stephen Gilbert

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {

/* STYLES GO HERE */

}

[Mobos]

Absolutely nothing!! A total blank page

[osgood_]

Mobos  wrote

Absolutely nothing!! A total blank page

I don't know why that should be. It should at least show something.

Can you put the css I provided at the end of ALL the css, most of which is in the actual page itself. You have included it at the end of your style-intro02.css file,so its not at the end of ALL the css:

.responsive-image {

width: auto;
height: 20%;
}

<!-- CSS HERE CSS HERE CSS HERE CSS HERE CSS HERE CSS HERE CSS HERE CSS HERE -->

</style>

<script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/bebas-neue:n4:default.js" type="text/javascript"></script>

[Nancy OShea]

I can confirm it.  My late model iPad Air with Safari shows the page fine in Portrait but not Landscape mode.

I would suggest commenting out your tablet display:none media queries until you find the culprit.

Nancy

[BenPleysier]

https://forums.adobe.com/people/Nancy+OShea  wrote

My late model iPad Air with Safari ....

Nancy

Stop it! You are making me drool.

[Mobos]

Hi everybody!

So, Osgood, I put it in the css on index02.html as well, but still nothing.

Where do I put

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {

/* STYLES GO HERE */

}

??

It all dazzles me now, hihi!

[Mobos]

OOOOOOOOOHHH, it workes!!  EVISSI :: The Plant Based Beverage Company

Instead of @media screen and (max-width: 1000px) } it put

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {

(which you mentioned before Osgood)

And I removed the bottom bit of code @media screen and (max-width: 768 px)}

I thought that wouldn't be necessary, is it??

But .... the page is a bit long. Can that white-space be removed??

Can you see it now Nancy?

[osgood_ · Accepted solution]

Mobos  wrote

But .... the page is a bit long. Can that white-space be removed??

Add the 2 additional css selectors shown in red below:::

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {

.container {

display: none;

}

.hide_desktop {

display: block;

}

.evissi_logo_wrapper {

text-align: center;

background-color: #5FA439;

}

.evissi_logo_wrapper img {

width: 70%;

height: auto;

}

.mobile_product_wrapper {

display: flex;

flex-wrap: wrap;

}

.mobile_product_wrapper a {

width: 50%;

}

.mobile_product_wrapper  {

background-color: yellow;

border-bottom: 4px solid pink;

}

.zoomlogo {

display: none;

}

.IntroIndexTaste {

display: none;

}

}

[Mobos]

I think it' o.k. now, thank you so much!!! evissi.com

This weekend I'll have a look at some other devices .....

Have a nice weekend!!