Breaking points

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?

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!

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

}

}