Question

Photo of Don Smallman

0

Dynamic Header Image sizes

3

Hi,

Can someone tell me how I add a header image so that it adjusts based on what device you are viewing the page on?  Right now they are not scaling down on my cell phone.

 

Thanks.

wp_ss_20150804_0001.jpg

  • Jeremy Turgeon

    Jeremy Turgeon

    Hi Don, can you provide a little more detail of what you're trying to do? Is this being added to the Header Content of the page? The header page zone? What template are you using? A screenshot would be great, as well!

    • Don Smallman

      Don Smallman

      Hi Jeremy! Please see above. This is what it looks like on my phone. I have tried it in the header and the content zones. Using the Stark Theme. The page above is from /page/380. Strangely enough, /page/346 looks fine on my phone. Both pages are very basic, and I don't see any differences in the way they are setup.

      • Photo of Dave Schuster

        0

        Page 211's problem is the table with your map and service times has a width of 900 px, so it's not going to be responsive. The two same-row cells in the table with the map and service times add up to 850px wide.  The map is inside one of the table cells (<td>) has an iframe with a hard coded width too. 

        For the page to be responsive, try and stay away from the hard-coded values.  Everything in Bootstrap works off number of columns.

        If you look at the page's source, look for the div with the id of ctl00_main_ctl11_ctl01_ctl00_upnlHtmlContent.  If you replace everything inside that div under the <h3> heading with the <row> div below, it should get you close.  You will probably have to tweak it some.

                                            <div id="ctl00_main_ctl11_ctl01_ctl00_upnlHtmlContent">
                                                <h3>Where we are:</h3>

        Copy from here....
                                                <div class="row">
                                                    <div class="embed-responsive embed-responsive-4by3 col-xs-12 col-md-7">">
                                                        <iframe frameborder="0" class="embed-responsive-item" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d13315.324894009023!2d-112.40977524042166!3d33.45370344371862!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x63d29821a5c3f7c7!2sThe+Rock+Church!5e0!3m2!1sen!2sus!4v1408857185375" style="border: 1px currentColor;" width="500"></iframe>
                                                    </div>
                                                    <div class="col-xs-12 col-md-5 text-center">
                                                        <h3>Service Times</h3>
                                                        <h4 style="background: rgb(238, 238, 238); padding: 5px 10px; border: 1px solid rgb(204, 204, 204);">Saturday</h4>
                                                        <h5>5 PM</h5>
                                                        <h4 style="background: rgb(238, 238, 238); padding: 5px 10px; border: 1px solid rgb(204, 204, 204);">Sunday</h4>
                                                        <h5>8:30 AM</h5>
                                                        <h5>10:15 AM</h5>
                                                        <h5>Noon</h5>
                                                    </div>
                                                </div>

        ... to here.
                                            </div>

         

        • Don Smallman

          Don Smallman

          Thanks Dave. That seemed to work great. The only thing I noticed, is that the map seems to be extra long on a computer browser.

        • Photo of Dave Schuster

          0

          Hi Don, 

          Your iframe is overriding the bootstrap by setting width="850" height="478".  You might try removing that setting and adding a couple of classes, one surrounding the iframe and the other to your iframe to make it responsive.  Using Firebug was able to get it to work by striking and adding the two classes below.  Hope this helps.

          <div id="ctl00_main_ctl10_ctl01_ctl00_upnlHtmlContent" class="embed-responsive embed-responsive-16by9">
                  <p>
                      <iframe width="850" height="478" frameborder="0" class="embed-responsive-item" webkitallowfullscreen="" src="https://player.vimeo.com/video/135303058?autoplay=1&amp;title=0&amp;byline=0&amp;portrait=0" mozallowfullscreen="" allowfullscreen=""></iframe>
                  </p>
              <p>
                  If you love the weekend services at The Rock, we know you'll love First Wednesday.&nbsp; <strong>First Wednesday</strong> service is a Comprehensive and Powerful time of Worship, Communion, and in-depth teaching from God’s Word.</p>
              <p>Come and experience First Wednesday at the Rock Church and start your month off right; you will leave renewed and ready to take on whatever the world throws at you.</p>
              <p>Our First Wednesday services take place on the first Wednesday of&nbsp;<strong>EVERY</strong> month at 7:00 PM.&nbsp; We hope to see you there!</p>
          </div>

        • Photo of Dave Schuster

          0

          It's the iframe around your video window. .../page/346 doesn't have the iframe.  I'm not sure how you're adding the iframe w/ the video to your 380 page, but if you can wrap a <div> around the iframe with class="embed-responsive embed-responsive-16x9" and then add the other class and remove the width and height from the iframe it should work, at least in firefox.  Those three changes through firebug seemed to make the pages responsive.
           

          • Don Smallman

            Don Smallman

            Sorry Dave. I did not realize it, but since I submitted this question, the header on that page has been replaced by the video. However, before, it was an image, just like the one page/364 and the source code was identical. I haven't had time, but will give your suggestions a try. There are other pages with headers that don't resize as well, so hopefully, this will fix it. Thank you!


            If you look at /page/211 you will see. There are no iframes and no sizes on that image.