Home>Support>Mobile only rows

Mobile only rows

By Marou, 9 years ago. Last reply by Andrew Misplon, 9 years ago.
Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].

Hi,

I was wondering how I could have certain rows only appear on certain screen sizes.

Thanks.

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 9 years, 3 months ago Andrew Misplon
    Hi, I Work Here

    Hi Marou

    Thanks for reaching out.

    Update: You can now use the Toggle Visibility addon in SiteOrigin Premium to set display conditions.
    Page: Toggle Visibility

    At the moment, there isn’t any easy way of doing this. What you could do is edit a row, click Attributes and use a Row CSS Class to do this manually, something like:

    mobile-only

    Next, you’ll need a custom CSS plugin. Install SiteOrigin CSS if you don’t have one already. Then, go to AppearanceCustom CSS and insert:

    .mobile-only {    display: none;}@media (max-width: 680px) {    .mobile-only {        display: block;    }}
  2. 9 years, 3 months ago Andrew Misplon
    Hi, I Work Here

    You can adjust the 680px breakpoint as required. Hope that helps.

  3. 9 years, 3 months ago Marou

    Hi Andrew,

    Thanks for the answer, this works great. If I want to have something appear everywhere but on mobile, can I change the row class to desktop-only and then instead of max-width, put min-width? Also, if I never want both rows to appear, I assume I should put the desktop-only row on min-width 681 instead of 680??

    Lastly, when I enter the custom css (or paste it in), the max-width and following { are in red and in a grey box. Why is that, and is it a problem? How do I solve that?

    Thanks again.

  4. 9 years, 3 months ago Andrew Misplon
    Hi, I Work Here

    Sure :)

    Desktop only could look something like this:

    .desktop-only {
    display: block;
}

@media (max-width: 680px) {
    .desktop-only {
        display: none;
    }
}

    The above and previous rules should be correct. The red text is most likely just part of the syntax highlighting.

  5. 9 years, 2 months ago Marou

    Hi Andrew,

    It all seems to work.

    Thanks again.

  6. 9 years, 2 months ago Andrew Misplon
    Hi, I Work Here

    Awesome :) Glad to hear that helped. All the best.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More