FAO Jude: Help With Styling Status Plugin

Tim Hi Jude,

Thanks for your help so far with this page: http://www.legends.report/live-latest-bitesize-legends-reports/

My 2 remaining requests are:

1. Making sure the youtube videos are responsive on the mobile -I'd like this to be site wide if possible. At the moment we use avada shortcodes for youtube videos on our regular posts and these resize fine but when we put naked youtube links in they don't resize automatically for mobile.

This is the CSS we already have on the site relating to videos:

.fusion-video.fusion-youtube {
margin: 15px auto;
}
.wpProQuiz_quiz input.wpProQuiz_button.wpProQuiz_QuestionButton {
background: #67b7e1 !important;
border-radius: 0px !important;
box-shadow: none !important;
border: none !important;
}

@media screen and (max-width: 500px) {
html {
background-size: cover !important;
}

h4.entry-title {
display: block !important;
clear: both;
padding: 5px;
}

}

2. The styling for this page is messed up on the moble, the text is very narrow and the H1 titles come out very misaligned, the text seems fine. I think it may have something to do with the previous CSS we were given so I have pasted that below to see if it may help:

This is the CSS we have at the moment for this page:

/* WPMU DEV Support Staff - start */
.wdqs_widget_status_body h1 {
font-size: 32px;
text-align: center;
}
.wdqs_widget_status_body {
font-family: Raleway;
}
.wdqs_widget_status_body .wdqs-thumbnail-container,
.wdqs_widget_status_body .wdqs-text-container {
width: 100%;
}
.wdqs_widget_status {
border: 0px solid gray;
padding-right: 50px;
}
.wdqs_widget_status .wdqs-post_meta-date {
font-size: 11px;
}
/* WPMU DEV Support Staff - end */
ul.wdqs_widget_status li{
margin: 0px 0px 150px 0px !important;
}

Thanks for your help!

  • Jude

    Hey Adam Wallis

    Hope all is well with you !

    1. Making sure the youtube videos are responsive on the mobile -I'd like this to be site wide if possible. At the moment we use avada shortcodes for youtube videos on our regular posts and these resize fine but when we put naked youtube links in they don't resize automatically for mobile.

    The best way forward here is to avoid the naked links and wrap the videos using video tags and adding this CSS to make it responsive ( fit within the container )

    video {
      width: 100%   ;
      height: auto  ;
    }

    2. The styling for this page is messed up on the moble, the text is very narrow and the H1 titles come out very misaligned, the text seems fine. I think it may have something to do with the previous CSS we were given so I have pasted that below to see if it may help:

    Here you go, this CSS should fix it, also like in our earlier chat, do clear cache on the browsers

    @media screen and (max-width: 500px) {
    
    ul.wdqs_widget_status {
        padding: 10px;
    }
    
    .wdqs_widget_status_body h1 span,
    .wdqs_widget_status_body h1 strong,
    .wdqs_widget_status_body h1{
        text-align: justify !important;
    }
    
    }

    Also I think you accidentally tagged Tim in your post. We'd want to avoid that in the future as it can flood our staff inboxes and slow everyone concerned down.

    Cheers
    Jude

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.