Hidding shortcodes Ultimate's Pullquotes on mobile devices

  • Hello everybody

    I’m new to the wordpress universe and I have been looking to the solution to my problem for a while without success. Here is my question : I have added nice pull quotes on different pages of a website using the Shortcodes Ultimate plugin. It looks nice on desktop screens but looks like s**t on mobile devices. The pull quotes using 30% of the width, on a mobile device, it streches the pull quotes too much making it uneasy to read.

    I would like to hide the pull quotes only on mobile devices. I tried to use media queries in the box-shortcodes.css style sheet I found in wp-content/plugins/shortcodes-ultimate/assets/css.
    Here is what I wrote above the .su-pullquote class:

    @media screen and (min-width: 680px) {
    .su-pullquote {
    display: block;}
    }
    @media screen and (max-width: 680px) {
    .su-pullquote {
    display: none;}
    }

    But it doesn’t seem to work as the pull quotes are still visible on my i-phone.
    Can someone give me some help with that please.
    Regards

    https://www.ads-software.com/plugins/shortcodes-ultimate/

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

  • First you shouldn’t edit the plugin CSS. You should use your child theme’s css file to add custom css. It took me 1 hour to learn and create a child theme for my theme. First it seems complex then it’s quite easy but VERY useful. If you already use a child theme, it’s easier for other people to help you, to point you where to edit.

    If you want to edit it right away you at least should edit it in your theme’s css file. But remember all your changes will be lost if you update the theme. Open style.css file in your wp-content/themes/THEME_NAME folder

    And add your css code there, if it doesn’t work maybe be you need to add !important to make it works:

    @media screen and (max-width: 680px) {
    .su-pullquote {
    display: none !important;}
    }
    `

    I highly recommend https://themeover.com/ to make custom css in wordpress, even if you already know css. It’s not free but it will save a lot of time, and enable you to look like a css pro even if you’e not. It basically lets you click anywhere on the site and edit that css via a GUI, meaning you don’t have to actually know any css at all. And there support is awesome.

    No I’m not an affiliate, just highly enthusiastic about this product!

    Thread Starter cbacheta_wp

    (@cbacheta_wp)

    @dzung.
    Thanks for your reply. I heard a lot about child themes and would like to learn more about it. Do you have a link to a tutorial ? I will try soon your CSS code with the !important and come back to you with the result.
    Have a nice day.

    Thread Starter cbacheta_wp

    (@cbacheta_wp)

    @robphat.
    Thanks for your advice. I don’t pretend to be a CSS pro (far from it) but I’m already working with Brackets to edit my stylesheets and the developpement tools included in Chrome to click&see where the CSS impacts. I will check that plugin you seem to be so enthusiastic about.
    Have a nice day.

    @cbacheta_wp Yes it’s an awesome plugin. Very quick and easy to use. You can basically restyle any them on the fly however you want. I do it starting with a child theme, but the css from that plugin is stored separately, and can even be turned off and exported, so you could do it on a parent theme if you needed to, but I would always recommend starting with a child theme.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Hidding shortcodes Ultimate's Pullquotes on mobile devices’ is closed to new replies.