Executive Theme Title Area Doesn't Center After Width Change

Community Forums Forums Design Tips and Tricks Executive Theme Title Area Doesn't Center After Width Change

This topic is: not resolved

This topic contains 6 replies, has 2 voices, and was last updated by  Stewart 1 year, 2 months ago.

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

    vandalais
    Participant
    Post count: 16

    The site I am working on has a fairly long title. I had to change the title area form 25% to 50%. When I view the site on a iPad, the title area and navigation no longer center. I can’t figure out what I need to change to make this work. Any help is appreciated.


    Follow me on Twitter

    http://www.neworleansbridalmakeovers.com/
    #49687

    Stewart
    Participant
    Post count: 156

    Hi,

    It looks like because you set it to 50% it is still using that number when viewing on ipad.

    To fix it open your style.css and scroll down to the bottom to the media queries and add a width value to both:

    #title-area and #header .widget-area of 100% for example.

    Try adding it in this media query: @media only screen and (max-width: 1023px)

    Hope this helps
    Stewart


    WordPress Developer – Need help upgrading to Genesis 2.0?My Blog
    Follow me on Twitter

    #49689

    vandalais
    Participant
    Post count: 16

    Hi Stewart,

    Thanks for your suggestion. I tried using this code at the bottom of my CSS file but it still didn’t seem to help.

    @media only screen and (max-width: 1023px) {
    #title-area{
    width: 100%;
    }

    #header .widget-area{
    width: 100%;
    }

    }

    Is this correct?

    Thanks,
    Keith


    Follow me on Twitter

    #49693

    Stewart
    Participant
    Post count: 156

    Yes not sure why its not overriding as a quick fix try :

    #title-area{
    width: 100% !important;
    }

    #header .widget-area{
    width: 100% !important;
    }

    It should then force the 100% width.

    Stewart


    WordPress Developer – Need help upgrading to Genesis 2.0?My Blog
    Follow me on Twitter

    #49734

    vandalais
    Participant
    Post count: 16

    Hi Stewart,

    I tried your solution with my existing CSS and it still wouldn’t work. When I commented out my custom styles other than the 50% title and widget area size, it works just fine. I just have to find out where the style are conflicting. I know there are some instances in which styles won’t necessarily cascade, I guess I’m just lucky enough to have just found one. At least I’m early enough in the project that I only have 20 or so styles to go through.

    Thanks for your help,

    Keith


    Follow me on Twitter

    #49778

    vandalais
    Participant
    Post count: 16

    ——- RESOLVED——-

    The conflict was actually on the last line of my custom CSS. On the homepage “Home Top” widget, instead of using three featured pages, I used a single page. I changed the width from 33% to 100%. When I added padding to an image used in the page, it somehow affected the title area. I adjusted the targeted element (img) and resolved the issue.


    Follow me on Twitter

    #49785

    Stewart
    Participant
    Post count: 156

    Nice Im glad you got it fixed.

    Stewart


    WordPress Developer – Need help upgrading to Genesis 2.0?My Blog
    Follow me on Twitter

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

You must be logged in to reply to this topic.