Executive Pro responsive header widget

[Amy Kvistad]

I'd like the header widget that appears on the right side of the header to be full width and centered when on a smaller mobile device.

I've tried a number of changes to the CSS and can't get it to work.

.site-header .widget-area {
float:right;
width:400px;
}

Here is the code making it float right.

Thanks for the help!

Amy

http://beacontest.theclientroom.com/

[Brad Dalton]

Make the changes in the Media Queries.

Example:

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

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

---

Tutorials for StudioPress Themes.

[Amy Kvistad]

Brad,
Thanks for the suggestion. This doesn't have any visible effect on the Linkedin button that is in the header widget.
It looks like the header widget is 100% of the width but I can only seem to position the LinkedIn button on the left or right with float.

[Brad Dalton]

Amy. You never mentioned the Linkedin button in your original question..

I’d like the header widget that appears on the right side of the header to be full width and centered when on a smaller mobile device.

Also, please understand some work is required on your behalf.

Note: You will need to learn how to use browser tool like Firebug or Web Inspector which enables you to inspect elements on your site to find and modify CSS in your browser before you make the changes in your child themes style sheet.

---

Tutorials for StudioPress Themes.

[radymx]

This reply has been marked as private.

[Author]

Posts