• 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

Front Page 2 Widget Area Layout Configurations: Digital Pro

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 › Front Page 2 Widget Area Layout Configurations: Digital Pro

This topic is: resolved
  • This topic has 4 replies, 2 voices, and was last updated 6 years, 1 month ago by Sveen.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • February 7, 2017 at 4:00 am #200684
    Sveen
    Participant

    Hi,

    I'd like to change the front page 2 widget area layout, now if I insert 2 widget each occupies 50% of the available space, while I'd like divide that area in 70% and 30%, so the first widget occupies 70% of the area, while the second only 30%.

    It's possible?

    Thanks for your help

    February 7, 2017 at 7:08 am #200685
    Victor Font
    Moderator

    The area you want to change is a flexible widget area. Flexible widget areas are assigned the CSS class used to determine the widget layout at run time. The assigned class is determined by the number of widgets (widget count) placed in the widget area. You could create new classes to adjust the width of the two widget, but make sure you place the somewhere after .front-page-2 .flexible-widgets.widget-halves .widget, .front-page-2 .widget at line 161 in style.css. This is where I found the class in the demo. You'll also need to determine the widget ids (#) on your own since you didn't post a link to your site. You might want to take a look at this to learn how to do that: https://victorfont.com/how-to-use-your-browsers-inspect-tool/

    .front-page-2 #text-4 {
    width: 70%;
    }

    .front-page-2 #enews-ext-3 {
    width: 30%;
    }


    Regards,

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

    February 7, 2017 at 10:32 am #200711
    Sveen
    Participant

    Thank you, can I ask you a question?

    I'd like to enlarge the text on the page Full Width, it's possible?

    Digital Pro Theme

    Thanks for your help

    February 7, 2017 at 10:43 am #200713
    Victor Font
    Moderator

    Yes, it's all controlled by CSS. Use your browser inspect tool to find the element you want to change and it will show you the CSS to modify.


    Regards,

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

    February 8, 2017 at 3:38 am #200756
    Sveen
    Participant

    Thanks for the help, did it all

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