Which part of my CSS is causing the text to disappear in mobile but show on a PC?

Question

When I view www.Edge-Trainer.com in my browser I'm able to see the section of text that starts out as "Ready for positive changes in your life? We can help you get ready for 2017!" but when I view it on my cell phone, it's not there.

What change in the html or CSS would correct that?

Thanks in advance,

Tim

Answer 1

Just Page width change.
Your HTML

<article id="anything-slider">
<section id="slider-container">
    <div class="anythingSlider anythingSlider-default activeSlider" style="width: 440px; height: 340px;"><div class="anythingWindow" style="width: 440px; height: 340px;"><ul id="slides" class="anythingBase horizontal" style="width: 440px; left: 0px;">
        <li class="panel1 panel" style="width: 440px; height: 340px;">
            <section class="slide-elements" style="width: 100%; height: 100%;">
                <div class="slide-img-container no-shadow left"> <br>
                    <br>
                    <br>

                    <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class="embed-container"><iframe src="https://www.youtube.com/embed/zddzPD7YABc?&amp;autoplay=0&amp;theme=light&amp;showinfo=0&amp;autohide=1&amp;modestbranding=0&amp;rel=0&amp;disablekb=1" frameborder="0" allowfullscreen=""></iframe></div>


                </div>
                <div class="title">
                    <h1>Ready for positive changes in your life? We can help you get ready for 2017!</h1>
                    <p>Our private personal training studio is located in a convenient downtown Houston location. Contact us today to start achieving your body transformation <strong>goals</strong>.</p>
                </div>
                <p>The Edge Personal Training Studio has top personal trainers with the knowledge and abilities to help you achieve <strong>your goals</strong>. We're so confident in our personal training abilities we offer a 100% money back guarantee!</p>
            </section>
        </li>
    </ul></div><span class="arrow back" style="display: none;"><a href="#"><span>«</span></a></span><span class="arrow forward" style="display: none;"><a href="#"><span>»</span></a></span></div>
</section>

your code inheritance #anything-slider > #slider-container ... .slide-elements > ... > .title

Your CSS

media only screen and (max-width: 767px) and (min-width: 480px)
anything-slider {    height: 340px;    padding-top: 0;} 
anything-slider {    padding: 30px 0 0;    height: 380px;    list-style: none;    overflow-y: auto;    overflow-x: hidden;    margin: 0 auto 30px;    position: relative;}

parent css is defined changing width but child css attriubte change do nothing.
so, title element seem like broken.

Answer 2

Your anythingslider.css has a @media to handle smartphones screens on line 618 that hides a few elements. Including your title class.