Highlighted

Breaking points

New Here ,
Oct 12, 2017

Copy link to clipboard

Copied

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.)

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;

}

}

Views

352

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Breaking points

New Here ,
Oct 12, 2017

Copy link to clipboard

Copied

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.)

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;

}

}

Views

353

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Oct 12, 2017 0
LEGEND ,
Oct 12, 2017

Copy link to clipboard

Copied

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%;

}

}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 12, 2017 1
New Here ,
Oct 12, 2017

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 12, 2017 0
New Here ,
Oct 12, 2017

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 12, 2017 0
LEGEND ,
Oct 12, 2017

Copy link to clipboard

Copied

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 */

}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 12, 2017 0
New Here ,
Oct 12, 2017

Copy link to clipboard

Copied

Absolutely nothing!! A total blank page

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 12, 2017 0
LEGEND ,
Oct 12, 2017

Copy link to clipboard

Copied

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 12, 2017 0
Adobe Community Professional ,
Oct 12, 2017

Copy link to clipboard

Copied

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

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 12, 2017 1
Adobe Community Professional ,
Oct 12, 2017

Copy link to clipboard

Copied

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

My late model iPad Air with Safari ....

Nancy

Stop it! You are making me drool.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 12, 2017 0
New Here ,
Oct 13, 2017

Copy link to clipboard

Copied

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!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 13, 2017 0
New Here ,
Oct 13, 2017

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 13, 2017 0
LEGEND ,
Oct 13, 2017

Copy link to clipboard

Copied

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;

}

}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 13, 2017 0
Mobos LATEST
New Here ,
Oct 13, 2017

Copy link to clipboard

Copied

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!!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 13, 2017 0