Hiding a shortcoded block in the post on mobile/desktop

Hello,

I have created a shortcoded block that I want to insert into posts in various places. The shortcode is referring to a flex block with related article(s). And I want the flex block to show image on desktop and tablets only. But I want the image to be hidden on mobile.

When I edit a page, I can do it by duplicating blocks and adjusting their visibility on mobile/desktop so that one row/element is only shown on mobile, while the other row/element is only shown on desktop.

However, in case of a shortcode inserted in a post, it does not work because both elements are shown (both original for desktop and duplicate for mobile). It looks like the display show/hide information is encoded into the row rather than into the flex block element.

So, my question is how can I create different elements for desktop/mobile inside the post?
Is there any slug I can add to the shortcoded string to show/hide it on desktop/mobile?
Is there any way I can hide/show image for desktop/mobile within one block (without block duplication)?

Below is my shortcode to be inserted into posts:


[td_flex_block_1 modules_on_row="" limit="1" hide_audio="yes" columns="25%" image_floated="float_left" image_size="td_1068x0" custom_title="Related Article" block_template_id="" post_ids="99" modules_extra_cat="" show_author="none" show_date="none" image_width="30" meta_info_align="" meta_info_horiz="content-horiz-left" meta_padding="0px 0px 20px 15px" modules_category="" show_review="none" excerpt_col="" btn_title="Read" mc1_el="45" show_btn="none" mix_type_h="" fe_saturate_h="1.5" mix_type=""]

[td_flex_block_1 modules_on_row="" limit="1" hide_audio="yes" columns="25%" image_floated="eyJhbGwiOiJmbG9hdF9sZWZ0IiwicGhvbmUiOiJub19mbG9hdCJ9" image_size="td_1068x0" custom_title="Related Article" block_template_id="" post_ids="99" modules_extra_cat="" show_author="none" show_date="none" image_width="eyJhbGwiOiIzMCIsInBob25lIjoiMTAwIn0=" meta_info_align="" meta_info_horiz="content-horiz-left" meta_padding="eyJhbGwiOiIwcHggMHB4IDIwcHggMTVweCIsInBob25lIjoiMHB4IDBweCAyMHB4IDBweCJ9" modules_category="" show_review="none" excerpt_col="" btn_title="Read" show_btn="none" mix_type_h="" fe_saturate_h="1.5" mix_type="" tdc_css="eyJhbGwiOnsiZGlzcGxheSI6IiJ9fQ==" show_cat="eyJwaG9uZSI6Im5vbmUifQ==" show_com="eyJwaG9uZSI6Im5vbmUifQ==" mc1_el="25"]


Thanks for your suggestion. Are there any standard classes to hide/display an element for mobile/tablet/phone etc, or do I have to develop and insert my own CSS classes into the Theme Panel/Custom code?

I know how to inspect elements and read the classes.
But in this thread Calin recommended me to create a class and assign it to element (without necessity to dig its name with the browser’s inspector). Therefore my question was totally different.
I asked whether you have ready-to-use classes for hiding/displaying elements on various screen sizes. Then I cann assign such classes to particular elements to show/hide them. For example, xx-hide-on-mobile, xx-show-on-mobile, xx-hide-on-desktop etc
I used another theme in the past and they made such classes available for the users. It was very convenient in some situations.

Thank you. I am not a coder, but I will try to make them myself then.

Hello Bettina,

Your solution did not work. Using my browser’s inspector, I can get a class (something like tdi_148) from a page and assign “display: none;” to it. But on another page this class will be different. So I will have to manually add more and more classes for every single page. Moreover, I may have several “Related article” blocks in one post.

Finally, I created my own classes and assigned them to each shortcoded element using the field Extra Class in TD composer:

@media (max-width: 767px){
    .my-custom-hidden-mobile {
        display: none;
    }
}

@media (min-width: 768px){
    .my-custom-visible-mobile {
        display: none;
    }
}

Now it works as expected. I get shortcode of the flex block and I insert it in many various posts on my site. They are properly hidden on mobile screens (or visible on bigger screens only).

• This reply was modified 3 years by Sergey.