Header Text Widget Mobile Responsive CSS

Homepage › Community Forums › Optimal Theme Support › Header Text Widget Mobile Responsive CSS

Tagged: 

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • March 20, 2013 at 5:29 pm #3267
    jeff9661
    Customer

      I added a text widget to the header on this site http://www.acmesigninc.com/ to include:

      Call Today !
      800-241-8980
      816-842-8980

      When I view it on an iPhone or iPad you can only see “Call Today”. I cannot figure out how to style it so it is centered on a the phone and can been seen on an iPad or similar tablet. I’ve tried adding a style under @media and the “Call Today” shows up centered, but no phone numbers. It did it look fine on my browser at the same narrow width, but it did not work on the phone. I’ve since removed this code in the style.css file under @media

      Here is the  current code in the Text Widget ( auto add paragraph is checked):

      <div id=”hdrPhone”><strong style=”font-size:24px;color:#FFD700;”>Call Today !</strong>
      800-241-8980
      816-842-8980</div>

      Here is the CSS I added:

      #header .wrap .widget-area .widget_text .textwidget #hdrPhone {
      font-size: 20px;
      float: right;
      line-height: 120%;
      margin-right:12px;
      color:#fff !important;
      text-align:center;
      }
      I copied and modified this code under @medaia with no luck, so I’m missing something.
      Hopefully someone with more experience than me can at least point me in the right direction. Thank you very much.

      March 20, 2013 at 9:29 pm #3273
      Wes
      Moderator

        You just need to change it to float: none; instead of “right” and it will center automatically. So add the following code to both of your responsive sections of your css (at the bottom) –

        #header .wrap .widget-area .widget_text .textwidget #hdrPhone {
        float: none;
        }

        Make sure you only add the above code to your responsive sections and not the main part of your css –

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

        and

        @media only screen and (min-width: 600px) and (max-width: 960px) {

        …..by doing this, it will continue to float right at regular width.

        March 21, 2013 at 8:59 am #3283
        jeff9661
        Customer

          Thanks Wes,

          I added the following code at the bottom of each @media section:

          #header .wrap .widget-area .widget_text .textwidget #hdrPhone {
          float: none;
          text-align: center;
          color:#fff !important;
          }

          I had to included text-align: center; in order for it to center, but the numbers are still not showing up, even after adding color:#fff !important;

          Jeff

          March 21, 2013 at 9:32 am #3284
          jeff9661
          Customer

            I had to revert back to my original CSS as my edits above affected the main CSS above the @media, not sure why. So I’m back to square one.

            March 21, 2013 at 9:44 am #3285
            jeff9661
            Customer

              I noticed that my CSS was only in the @media sections, so I added this to the header CSS section.

              #header .wrap .widget-area .widget_text .textwidget #hdrPhone {
              font-size: 20px;
              float: right;
              line-height: 120%;
              margin-right:12px;
              color:#fff !important;
              text-align:center;
              }

              An this at the bottom of each @media section

              #header .wrap .widget-area .widget_text .textwidget #hdrPhone {
              float: none;
              }

              The code in the @media sections again affected the CSS in the header. Moved it in the middle. So I commented the out the CSS code in the @media sections.

               

              March 21, 2013 at 3:25 pm #3292
              Wes
              Moderator

                As mentioned, the only thing you need to do is change it to float: none; in the responsive section and it will automatically center since you already have it styled to do so in the main css. That means you won’t need to add any of the other code in your responsive css.

                Here is what it will look like if you just add float: none; – http://i.imgur.com/C2qfoho.png

                This won’t affect the main css (regular desktop/full width size) if you put the above suggested code in the places previously mentioned.

                March 22, 2013 at 11:00 am #3297
                jeff9661
                Customer

                  Hi Wes,

                  I’m sorry to be such a pain, just trying like crazy to get this working. I appreciate you taking the time to help me and certainly understand your time is valuable. So if you need to bill me let me know. Even though I have tried a few different things, I have done exactly as you mentioned a few times. The problem is not with getting it to center, the problem is the phone numbers go away on iPhone and iPad and the main header at full width gets messed up when adding the code below to the @media sections. Here are two links that may help clarify.

                  http://www.acmesigninc.com/acme-css-grab.html

                  http://www.acmesigninc.com/ACME-style-edit.css

                  #header .wrap .widget-area .widget_text .textwidget #hdrPhone {
                  float: none;
                  }

                  March 22, 2013 at 12:11 pm #3298
                  Wes
                  Moderator

                    Is it possible you could create a temporary user/password so I can login and edit the css? It should be quick, and I have an iPhone/iPad to test everything on.

                    March 22, 2013 at 12:32 pm #3301
                    Wes
                    Moderator

                      Also, I just noticed the phone number currently doesn’t show with Safari but it does with Chrome on the iPhone….

                      So again, if you can create a temporary login for me, I can go in and make a couple changes and see about getting it fixed since it shouldn’t take long…….I would only need access to the css

                      March 22, 2013 at 2:12 pm #3302
                      jeff9661
                      Customer

                        I sent you the info via your website contact form. Thanks so much for your help.

                        March 22, 2013 at 2:59 pm #3303
                        Wes
                        Moderator

                          Ok, it took way longer to do this than I originally thought, but I figured out exactly what the issue was.

                          Here’s what’s happening: As I previously mentioned, the Chrome browser shows the phone text correctly, but as you’ve noticed, the text/phone numbers disappear in the Safari Browser. The reason is because Safari adds hyperlinks to phone numbers automatically on mobile devices (iPhone/Ipad). So when a hyperlink is added to the phone numbers, it uses the styling from your stylesheet and is treated just like a regular link…..and in your case since you’re using the Orange Color Scheme it displays the Phone Text as Orange since that is your default link color. Your header background is also Orange and that was why it wasn’t showing up, since they blend together.

                          The code appears like this – <a href="example.com" rel="nofollow">800-241-8980</a>

                          ….when it should just be <strong>800-241-8980</strong>

                          So I added the following code (in addition) to style the text to appear white (but just for that particular text/section) –

                          #header .wrap .widget-area .widget_text .textwidget #hdrPhone a {
                          color: #fff;
                          }

                          So everything should be working fine now, I’ve checked on my phone.

                          Having the phone number as a link could be great for your visitors when using a mobile device since all they have to do is tap the number and it will automatically ask if they want to make the call. However, there are ways to prevent Safari from adding links if that’s what you want to do.

                          March 22, 2013 at 3:39 pm #3304
                          jeff9661
                          Customer

                            Interesting, I would have never guessed that. Thank you again so much for your help. I will remember when it comes time to to hire someone or purchase another theme. By the way I really like the Optimal theme and Ally too. How do you get the animation in the Ally slider HTML 5, Flash?

                            March 22, 2013 at 11:17 pm #3312
                            Wes
                            Moderator

                              Thanks, its actually a jquery slider.

                              March 23, 2013 at 9:22 am #3317
                              jeff9661
                              Customer

                                Is that slider included in the theme? Is it available elsewhere?  I really like it.

                                March 23, 2013 at 2:41 pm #3325
                                Wes
                                Moderator

                                  Yes it comes with the Ally theme….and you can use it with any theme you want.

                                • Author
                                  Posts
                                Viewing 15 posts - 1 through 15 (of 15 total)
                                • You must be logged in to reply to this topic.