CSS for Sermons Per Page

  • Resolved redfezco

    (@redfezco)


    5 years, 4 months ago

    I need to change the behaviour/css when using the [sermons per_page=”20″] shortcode.

    At the moment this shows the image at the side when on screens 801px wide or greater, but shows the image above the text on screens 800px or smaller. I need it to be above the text regardless of screen size. I’ve tried various css options but can’t get it work that way – any suggestions?

    Thanks!

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)

  • Unsolicited advice…I think it’s a bad idea.

    That said, this should work:

    @media (max-width: 800px) {

  .wpfc-sermon-inner {
    display: flex;
    flex-flow: row wrap;
  }

  .wpfc-sermon-image {
    flex: 0 30%;
  }
  
  .wpfc-sermon-image-img {
    height: 100%;
  }

  .wpfc-sermon-main {
    flex: 1;
  }

}
    Thread Starter redfezco

    (@redfezco)

    Hi Mike.

    Thanks for the reply – appreciated. You’re right, it might be a bad idea but I’d like to try!

    That said, what you suggested does the opposite of what I’m after. It puts the images on the left when viewed on tablets on mobiles i.e. replicates the desktop view on tablets and mobiles

    I’m looking to replicate the tablet and mobile view on a desktop

    My bad. Disregard my comment too. I do like that idea. We display 3 columns, similar to this on our site.

    Add this to your child theme’s CSS:

    
.wpfc-sermon-inner {
    display: inherit;
  }
  
.wpfc-sermon-image-img {
  height: 100%;
  padding-top: 56.25%;
}
    Thread Starter redfezco

    (@redfezco)

    Thanks Mike. That worked, with one addition:

    
.wpfc-sermon-inner {
    display: inherit !important;
  }
  
.wpfc-sermon-image-img {
  height: 100%;
  padding-top: 56.25%;
}

    Without the !important tag the code wasn’t sufficient to override the default!

    Interesting as I used it without !important on my testing site yesterday and it worked…lol!

    Glad it worked though!

    Thread Starter redfezco

    (@redfezco)

    I guess it might well depend upon the theme you are using and how the css is being implemented.

    But thank you for help!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘CSS for Sermons Per Page’ is closed to new replies.