Responsive Widget Help

Community Forums Forums Design Tips and Tricks Responsive Widget Help

This topic is: resolved

Tagged: 

This topic contains 6 replies, has 3 voices, and was last updated by  lvvvvvl 1 year ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #54309

    lvvvvvl
    Participant
    Post count: 16

    I just finished adding and styling a test widget to my Executive Header theme right next to the logo. It looks fine on desktops but when I view it from my phone, the text widget is too aligned to the left and the first words of the paragraph can’t be read. How do I go about centering this text in smartphone devices?

    I tried calling that text widget using the following media queries but none of the styles I write seem to change anything, so I don’t know if I’m using the right class/id hooks:

    /* Smartphones (portrait and landscape) ———– */
    @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 480px) {
    #header #text-22 .involution {
    float: center;
    }
    }

    My blog url is this:

    http://goo.gl/1KbHb

    http://goo.gl/1KbHb
    #54323

    Anita
    Participant
    Post count: 7510

    It’s because your header/logo image is not responding properly. Try adding the Genesis Responsive Header plugin for the logo image – http://designsbynickthegeek.com/plugins/genesis-responsive-header.


    When asking for help, please provide a link or screen shot showing your problem!
    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me!

    #54328

    lvvvvvl
    Participant
    Post count: 16

    Thanks for the response. I’ve added the plugin and created a 480x image for my site, the logo looks better but the problem with the text widget still remains, you can’t read the first words of every sentence. Is there anything else I can do?

    #54554

    lvvvvvl
    Participant
    Post count: 16

    Still trying to fix this…does anyone have any other suggestions?

    #54562

    Anita
    Participant
    Post count: 7510

    Did you copy the Text-22 CSS code down into the media queries/responsive design area? I cannot target your code specifically because you have Minify activated. But take your code for that text box, copy down and make your adjustments in the 480 area.


    When asking for help, please provide a link or screen shot showing your problem!
    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me!

    #54588

    Spanka
    Participant
    Post count: 30

    Hey ivvvvl – you’ve got a few issues, but nothing major!

    #header #text-22 {
        background: url("/wp-content/uploads/2013/08/topquote.png") no-repeat scroll 31px 16px #FFFFFF;
        float: right;
        height: 100px;
        max-width: 100%;
        width: 600px;
    }

    1. The height is gonna kill you. If you want to squeeze something to 1/10th the width, it gets taller – let it go natural height and remove that height declaration :)

    2. See the max-width declaration? 600px is fine for a width, but most phones are 480px wide – which is why you couldn’t see the left side (it was floated right, so when you shrink, left side vanishes). Max width controls its upper width – perfect declaration for mobile work. Basically, be 600px when you can be, but if 100% < 600px, scale down!

    3. Your text is specifically formatted for wide view and that probably isn’t going to scale hugely well – it might, but I cant see it! If it does, great. If it doesn’t…

    #header #text-22 .involution {
      color: #3B053A;
      font-family: 'Cinzel',serif;
      font-size: x-small;
      letter-spacing: 2px;
      line-height: 140%;
      padding: 10px;
      text-align: center;
      text-indent: 50px;
    }

    Equalize padding left & right for balance. Center the text. Remove the text-indent. All about balance. But if that’s not something you find desirable, you could just drop your padding back to 10px 20px (or similar) and modify your background-image in #header #text-22 – get rid of the 31px left offset – that’s pushing the curly quotes beneath the text.

    3. it’s floating right – cool – but that’s gonna look odd if you scale down your browser – remember: it’s not just a case of desktop and iPhone – it’s everything in between. You might consider something like this:

    #header .widget-area {
        background: none repeat scroll 0 0 #FFFFFF;
        max-width: 100%;
        padding: 0 0 20px;
    }

    The colour isn’t right, but that’s easy to fix. Max width just to be safe (if you’re dealing with responsive sites, nearly every image/structural block should have this!). But really, this just turns your 2 separate blocks (logo & quote) into a single white-backed header.

    • This reply was modified 1 year ago by  Spanka.
    • This reply was modified 1 year ago by  Spanka.
    #54815

    lvvvvvl
    Participant
    Post count: 16

    Thanks a lot Spanka! I applied everything you said and it looks great on both desktop and phone!

    Very thorough :D

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.