• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Lifestyle Pro Custom Theme Not Responsive on 480

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Lifestyle Pro Custom Theme Not Responsive on 480

This topic is: not resolved

Tagged: Custom header, lifestyle Pro, responsive

  • This topic has 3 replies, 2 voices, and was last updated 7 years, 8 months ago by Brad Dalton.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • May 7, 2015 at 5:27 pm #150797
    pixiegrl
    Member

    I have followed Brad's advice on WPSites to add a custom header. The only problem is that it is not responsive on an mobile device that is 480 px (for example a Samsung Galaxy S3). I do not see any code for 480 px. How do I add that to make it work on there?

    Thanks!

    http://www.lifeinsummerville.com
    May 8, 2015 at 12:07 am #150852
    Brad Dalton
    Participant

    Add some for the classes which need adjusting at that screen size:

    @media only screen and (max-width: 480px) {
    
    Add Your Rules Here
    	
    }
    

    Get Help – Book Consultation.

    May 8, 2015 at 5:25 am #150878
    pixiegrl
    Member

    Thank you!

    As I am not that great with coding, can I use the same basic rule that apply for the 767 or do I need to write brand new rues specific to the 480?

    May 8, 2015 at 9:33 am #150957
    Brad Dalton
    Participant

    You'll need to inspect the different elements which need adjusting at that screen size. Then you can modify the values for the CSS using your browser before adding the CSS to your Media Queries.

    The CSS for the Media Queries will vary depending on different variables like what you populate the header right widget with, the width and the height of your header image, how you want it to look on different screen sizes etc.


    Get Help – Book Consultation.

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble