Right header widget to be mobile responsive

Community Forums Forums General Discussion Right header widget to be mobile responsive

This topic is: not resolved

This topic contains 4 replies, has 2 voices, and was last updated by  Herman 7 months, 3 weeks ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #92760

    Herman
    Participant
    Post count: 91

    How do I get the contact info in the top right widget to be mobile responsive (Executive Pro)?
    Currently it runs off the screen on my iPhone.

    Thanks

    http://www.jackcooperlaw.com/new/
    #92863

    nutsandbolts
    Moderator
    Post count: 3173

    Look for the following in your stylesheet (near the bottom):

    @media only screen and (max-width: 500px) {
    
    	.entry-title {
    		font-size: 24px;
    		font-size: 2.4rem;
    	}
    
    	.content .entry-header .entry-meta .entry-comments-link {
    		display: none;
    	}
    
    }

    and change it to this:

    @media only screen and (max-width: 500px) {
    
    	.entry-title {
    		font-size: 24px;
    		font-size: 2.4rem;
    	}
    
    	.content .entry-header .entry-meta .entry-comments-link {
    		display: none;
    	}
    
            .site-header .widget-area {
                    width: 90%;
            }
    
    }

    Andrea Whitmer, Owner, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #93066

    Herman
    Participant
    Post count: 91

    Thanks Andrea…I have a follow-up question
    How do I left align the contact info so it’s still mobile responsive?

    I tried left aligning the widget via css then adding padding but it messed by the mobile display.

    #93539

    nutsandbolts
    Moderator
    Post count: 3173

    On the 768px media query, add a float: none; for the widget area as well as text-align: center; to keep it from remaining aligned to the right once it drops below the site title.


    Andrea Whitmer, Owner, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #93581

    Herman
    Participant
    Post count: 91

    Didn’t work for me.
    I added the css to line 2285 but it made no difference.

    What am I missing?

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

You must be logged in to reply to this topic.