• 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

Having a frustrating issue

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 › Having a frustrating issue

This topic is: not resolved

Tagged: css, design, genesis, Wordpress

  • This topic has 14 replies, 3 voices, and was last updated 2 years, 2 months ago by ah26.
Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • January 17, 2021 at 7:09 pm #502694
    ah26
    Participant

    I am using Modern Studio Links to demo.

    On the right side bar I have a video. I inserted using widget video link/ container. But I want the whole video to fill the white space so it looks smoother. Removing the padding doesn't help.

    .sidebar .widget {
    background-color: #fff;
    border: 2px solid #000;
    margin-bottom: 60px;
    padding: 40px 40px 30px;

    See: photoside bar

    Any ideas?

    https://my.studiopress.com/themes/modern-studio/#demo-full
    January 18, 2021 at 10:09 am #502700
    andytc
    Participant

    Link to site ?

    January 18, 2021 at 10:09 pm #502710
    ah26
    Participant

    here you go

    thanks.

    January 19, 2021 at 6:35 am #502713
    andytc
    Participant

    Cool , It's a tricky one because the padding will also affect the widget title that has negative margin-top to pull it down over the actual widget content. If the video needs to be full width and fill the space top to bottom , the widget title won't look very good hanging over the video. You can try the CSS below , but this will change the widget title layout on that widget only (video) to be above the widget itself. Play with it.
    We are going to overrule the width of the iFrame to be 100% , if you can you could adjust that inline , but for now , just overrule it as below.

    .sidebar .widget_media_video {
      padding: 0;
    }
    
    .sidebar .wp-video {
      margin-bottom: 0;
    }
    
    .sidebar .widget_media_video .widget-title {
      margin-top: -83px;
    }
    
    .sidebar .wp-video-shortcode,.sidebar .wp-video-shortcode iframe  {
      width: 100% !important;
    }
    
    .sidebar .mejs-container {
      padding-top: 56.25%;
    }
    

    Best I can do ... Hope that helps

    January 19, 2021 at 8:10 am #502714
    andytc
    Participant

    EDIT : Leave out this line , not needed.

    .sidebar .mejs-container {
      padding-top: 56.25%;
    }
    January 19, 2021 at 3:04 pm #502723
    ah26
    Participant

    Thanks but it didn't do much on my end. Do you think I could just remove that single widget and put a video 265 x 250 which is about the size of the widget. Seems like when I comment of widgets from css file they all get removed.

    I really appreciate your help. I'm usually pretty good with this stuff but apparently not anymore.

    January 19, 2021 at 4:02 pm #502730
    andytc
    Participant

    Didn’t do much

    What did it do and what didn’t it do ?

    Did you clear your browser cache ?

    Where did you place the CSS ?

    You could place the code and leave it there so we can take another look

    January 20, 2021 at 12:10 am #502749
    ah26
    Participant

    Pretty much stayed the same. Didn't fill the box with video player. 
    Dropped in style.css in the widget section.
    Code is on site. its a dummy site so can mess with it a bit. 

    /* Widgets
    ---------------------------------------------------------------------------------------------------- */

    .widget {
    word-wrap: break-word;
    }

    .widget:last-child {
    margin-bottom: 0;
    }

    .widget ol > li {
    list-style-position: inside;
    list-style-type: decimal;
    padding-left: 20px;
    text-indent: -20px;
    }

    .widget li li {
    border: 0;
    margin: 0 0 0 30px;
    padding: 0;
    }

    .widget_calendar table {
    width: 100%;
    }

    .widget_calendar td,
    .widget_calendar th {
    text-align: center;
    }

    .sidebar .widget_media_video {
        padding: 0;
    }

    .sidebar .wp-video {
        margin-bottom: 0;
    }

    .sidebar .widget_media_video .widget-title {
        margin-top: -83px;
    }

    .sidebar .wp-video-shortcode,.sidebar .wp-video-shortcode iframe  {
        width: 100% !important;
    }

    January 20, 2021 at 3:41 am #502751
    andytc
    Participant

    Ok , I've checked and the styles aren't showing up in styles.css , so that's the problem.

    /* Widgets
    ---------------------------------------------------------------------------------------------------- */
    
    .widget {
    	word-wrap: break-word;
    }
    
    .widget:last-child {
    	margin-bottom: 0;
    }
    
    .widget ol > li {
    	list-style-position: inside;
    	list-style-type: decimal;
    	padding-left: 20px;
    	text-indent: -20px;
    }
    
    .widget li li {
    	border: 0;
    	margin: 0 0 0 30px;
    	padding: 0;
    }
    
    .widget_calendar table {
    	width: 100%;
    }
    
    .widget_calendar td,
    .widget_calendar th {
    	text-align: center;
    }

    Try adding the styles I gave you directly into the custom CSS section in the customiser.

    January 20, 2021 at 11:07 am #502757
    Anita
    Keymaster

    I would target just that one widget. Add this to the Additional CSS box in the Customizer.

    #media_video-2 {
        padding: 0;
    }

    Then see if the video will automatically adjust in size.


    Love coffee, chocolate and my Bella!

    January 20, 2021 at 4:02 pm #502759
    ah26
    Participant

    Anita, thanks for the help. getting closer.... that actually worked. just need to fill the top with zero padding... but not sure... see screenshot below.

    I entered

    #media_video-2 {
    padding: 0;
    }

    It messed up the 'video test' box padding a bit. Now I just need to fix the box padding so it looks like the 'site navigation' box.

    screenshot

    January 20, 2021 at 4:32 pm #502760
    Anita
    Keymaster

    Add this too:

    #media_video-2 .widget-title.widgettitle {
        display: none;
    }
    
    #media_video-2 .wp-video {
        margin-bottom: 0;
    }
    

    Love coffee, chocolate and my Bella!

    January 20, 2021 at 8:07 pm #502762
    ah26
    Participant

    Thanks... almost got it. now, what if I want the widget title and box like this shot

    Thanks for the assistance.

    January 20, 2021 at 8:43 pm #502763
    Anita
    Keymaster

    There isn't a screen shot.


    Love coffee, chocolate and my Bella!

    January 20, 2021 at 8:57 pm #502765
    ah26
    Participant

    sorry about that https://postimg.cc/rzY2BbfT

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