Community Forums › Forums › Archived Forums › Design Tips and Tricks › Having a frustrating issue
- This topic has 14 replies, 3 voices, and was last updated 2 years, 10 months ago by
ah26.
-
AuthorPosts
-
January 17, 2021 at 7:09 pm #502694
ah26
ParticipantI 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: photo
Any ideas?
https://my.studiopress.com/themes/modern-studio/#demo-fullJanuary 18, 2021 at 10:09 am #502700andytc
ParticipantLink to site ?
January 18, 2021 at 10:09 pm #502710January 19, 2021 at 6:35 am #502713andytc
ParticipantCool , 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 #502714andytc
ParticipantEDIT : Leave out this line , not needed.
.sidebar .mejs-container { padding-top: 56.25%; }
January 19, 2021 at 3:04 pm #502723ah26
ParticipantThanks 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 #502730andytc
ParticipantDidn’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 #502749ah26
ParticipantPretty 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 #502751andytc
ParticipantOk , 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 #502757Anita
KeymasterI 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 #502759ah26
ParticipantAnita, 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.
January 20, 2021 at 4:32 pm #502760Anita
KeymasterAdd 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 #502762ah26
ParticipantThanks... almost got it. now, what if I want the widget title and box like this
Thanks for the assistance.
January 20, 2021 at 8:43 pm #502763Anita
KeymasterThere isn't a screen shot.
Love coffee, chocolate and my Bella!
January 20, 2021 at 8:57 pm #502765ah26
Participantsorry about that https://postimg.cc/rzY2BbfT
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.