• 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

How to change background and text color for Front Page Widget 4 on mobile

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 › How to change background and text color for Front Page Widget 4 on mobile

This topic is: not resolved

Tagged: css, front page, text color, widget, widget 4

  • This topic has 1 reply, 2 voices, and was last updated 4 years, 9 months ago by Victor Font.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • June 13, 2018 at 6:19 pm #220802
    Doug
    Participant

    Greatly appreciate any input on this.

    I'm trying to change the background and text color for the Front Page Widget 4 section.

    This will include 3 changes.
    1. The background color from gray to blue (#117AA8)
    2. The page entry titles from black to white (#fff)
    3. The section title from black to white (#fff)

    Using Inspect and some research on CSS, I was able to do the three changes. However, the changes are only appearing on my desktop version. The mobile version is still a gray background and black text for both the section header and the page titles.

    Is there something I'm missing for mobile, or did I make the changes in the wrong section?

    Below are changes I've made so far:

    For 1:
    I've located the following code:
    .front-page-4 {
    background-color: #117AA8;
    }

    That's on document: Style-front.css, and I changed the background-color to the way it appears above.

    For 2:
    I've located the following code:
    .entry-title a {
    color: #333;
    }

    In document: style.css, I changed the color from #333 to #fff.

    For 3, I did some research on CSS color, and added a line to the existing code to now say:

    .front-page .widget-title {
    text-transform: uppercase;
    color: #fff;
    }

    ... in the doc style-front.css

    http://arrovox.com
    June 14, 2018 at 3:59 am #220818
    Victor Font
    Moderator

    Mobile CSS is handled by the child theme's media queries that should be near the bottom of style.css. Check the media queries first to see of there's a color value.

    If not, then the problem is mobile caching. Mobile devices are notorious for not updating style sheets to reflect changes. Clear the cache on the mobile device and refresh the page. Working in the browser's private mode on the mobile device can circumvent the caching issues.

    A better way to test mobile, is with the browser's built in mobile tester. All major browsers can simulate mobile displays these days.


    Regards,

    Victor
    https://victorfont.com/
    Call us toll free: 844-VIC-FONT (842-3668)
    Have you requested your free website audit yet?

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 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