Docs

[bedingfield]

Hi there,

I am just about finished with my design now but I would like to hide and adjust some parts for smart phones.

http://elyrunners.club/ironman-bolton/

On the page above, I would like to hide the tags, and make the copy 100% wide. I would also like to reduce size of heading and entry content excerpt.

What CSS do I need to add/amend to do this please?

Thank you.

[Rupok]

Hi there,

Thanks for writing in. You can use the content hiding feature of Connerstone. Let’s select the Section/Row and check any devices enabled to hide the content – http://prntscr.com/99q8up

That is if you click on Mobile icon then the content will be hidden on Mobile.

Hope this helps.

Cheers!

[bedingfield]

ah, I am not using cornerstone on this site.

[Rupok]

Hi there,

Thanks for writing back. Which editor are you using? You can add class to the element from Text mode by editing as HTML for default editor. In that case you can add x-hide-xs class to your element.

Other hiding classes :

x-hide-xl – Extra Large | 1200px & Up
x-hide-lg – Large | 980px – 1199px
x-hide-md – Medium | 768px – 979px
x-hide-sm – Small | 481px – 767px
x-hide-xs – Extra Small | 480px & Smaller

Hope this helps.

[bedingfield]

Hi there,

Could you give me an example how these are used in context?

Thank you.

[Christopher]

Hi there,

You should use it like this :

<div class="x-hide-sm x-hide-xs">Content goes here</div>

Hope it helps.

[bedingfield]

Hi Christopher,

Thank you.

Am I right in saying this will not work with tags as they are generated by PHP, so this would not work with say, hiding tags and full width image on this page for smartphones, like the iPhone or Samsung S3.

I would also need to reduce size of ‘excerpt’ just above the tags too.

If not, what would be best option?

Again, thank you.

[Paul R]

Hi,

To hide the tags in mobile, you can add this under Custom > CSS in the Customizer.

@media (max-width: 767px) {
/* hide excerpt on mobile */
.single-post .entry-header p {
   display:none;
}

.single-post .entry-header p.p-meta {
   display:block !important;
}
/* hide image on mobile */
.single-post .entry-featured {
    display:none;
}
/* reduce size of excerpt in mobile */
.single-post .excerpt {
   font-size:17px;
}
}

Hope that helps.

[Author]

Posts