[Good_Usernames_GoneParticipant]

Hey Staff,

I understand the size differences when viewing my website through different devices and the reasons why they will all display slightly differently.

But am I missing something?

Is there some sort of feature in Cornerstone whereby I could display say a large image if viewed from a desktop computer, but I could display another image (or none at all) to someone using a small screen smart phone?

Many thanks!

[RupokMember]

Hi there,

Thanks for writing in! Yes there is such content hiding feature in X.

You can select the Section/Row and enable device icon to hide the content for specific devices – http://prntscr.com/99q8up

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

Hope this helps.

Cheers!

[Good_Usernames_GoneParticipant]

Thank you vert much for pointing me in the right direction!

[LelyModerator]

You’re welcome!

Cheers!

[Good_Usernames_GoneParticipant]

Hey Staff,

Sorry to ask you again, but I’m still really struggling with ‘Content Hiding’ using Cornerstone.

– Overview

Please can you help me again Lely, as I am trying to get my Home Page to display correctly on ALL size screens?

Attachment 1 – (Extra Large) is the correct layout I want to use on that size screen (no worries there)

Attachment 2 – (Medium inc. Small size screen) uses the same layout, as above but looks terrible.

Questions

1.) Does Content Hiding simply hide an Element, but nothing else?

2.) Am I supposed to create my Home Page the way I want it (i.e. Attachment – Extra Large) – Then go into each screen size and create (or tinker with) the layout and make changes. Then save it so it will then display like that on other screen sizes? (Like I am making multiple Home Pages?)

3.) If you take a look at Attachment 2, the green bulleted Feature Box has shunted down to accommodate the changes in screen size. Am I able to delete these 3 feature boxes entirely on the Medium to small screen sizes, then insert them UNDERNEATH the image so it will display correctly?

If I did this though, surely I would also have to change the image above from a 2 column layout to a 1 column? (otherwise there would be a ‘hole’ above it)

HELP! I can’t seem to get my head all around this!

Many thanks!

[Good_Usernames_GoneParticipant]

This reply has been marked as private.

[FriechModerator]

Hi There,

Yes, I can replicate the issue on your site. The site is throwing an 500 Internal Server Error when trying to save the page. Would you mind contacting your hosting support and confirm if they meet this WordPress requirements (PHP & MySQL): https://wordpress.org/about/requirements/

Regarding your 3 questions above, #1 Yes, it will simply hide things.

#2 Not really, please read the posts below on how you can properly utilize the Hide Base On Screen Width option.

– https://community.theme.co/forums/topic/switch-layout-of-elements-based-on-screen-size/#post-807682
– https://community.theme.co/forums/topic/timeline-image-rightleft-question/#post-782616

#3 The Hide Base On Screen Width option is exactly for this kind of scenario. Basically you will create two ROWS or SECTION, one is dedicated for desktop so it will be hidden on mobile. And the second one is for mobile where it will be hidden on desktop.

With this kind of setup, not only you can change the layout of the page in mobile/desktop view, but you can also place different elements on different screens.

Hope it helps, Cheers!

[Good_Usernames_GoneParticipant]

Thank you Staff.

I’ll take a look through what you have sent me (their’s a fair bit) and try to get my head around it.

I’ll let you know how I go in the next 24 hours!

Many thanks and sorry about my brain lag over this one….

[NicoModerator]

Feel free to let us know how it goes.

Thanks.

[Good_Usernames_GoneParticipant]

Hey Staff,

I’ve been taking some time to try and get my head around the ‘Hide Base on Screen Width’ feature.

I’m almost there but have hit a snag.
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

My Extra Large and Large screen views for my Home Page are 100% ok (see attachment 1.) with x3 verticle Feature Boxes running vertically of the image on the right-hand side.

My Medium and Small screen views (see attachment 2) I am still struggling with. I have made a second x3 Feature Boxes running horizontally this time beneath the image. I have correctly set up the x3 Feature Boxes to display this way ONLY on the Medium and Small sized screens, but I am unable to remove the right-hand side Feature Boxes, as it removes the image also if I try to do this.

How can I remove the right-hand side Feature Boxes, but retain my image for the medium and small screens.

Many thanks, the topic of Hide Base on Screen Width is wearing and slowing me down!

[Paul RModerator]

Hi,

You can use the following classes to apply visibility per element.

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

So for example if you want to hide your image element in mobile you can add x-hide-xs class in the class field of your image element.

http://screencast.com/t/lHetWx8GDLN9

You can do the same for other elements.

Hope that helps.

Thanks

[Good_Usernames_GoneParticipant]

Hey Staff,

Thank you for helping me with that last fix.

It has been the thing I have struggled with most since using Cornerstone.

The last thing I am struggling with on my Home Page is:

_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

I need to have my image now DISPLAY IN THE MIDDLE (to take up the blank hole that I have created by removing the x3 Feature Boxes on the right hand side for Medium and Small screen sizes. This image is currently in a 2/3 + 1/3 column format, but needs to change to a 1 column format for it to then centralise in the middle.

Hopefully Cornerstone has this feature, I’ve been unable to locate it.

_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

Thank you again for your help over this single subject.

My brain has immense lag concerning the Hide Base on Screen Width feature….

[Rue NelModerator]

Hello There,

Thank you for the detailed information. To resolve this issue, please edit your page in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS

@media(max-width: 979px){
    #x-section-2 .x-column.x-sm{
        width: 100%;
        float: none;
    }
}

And to make it center, please make sure that the text alignment in the column settings is at the center to make sure that all the contents will be displayed at the center.

Hope this helps. Please let us know how it goes.

[Good_Usernames_GoneParticipant]

WOW! That last fix works great.

I appreciate the patience you have showed me so far and with what you have shown me I should be able to make the few changes to my Home Page Re: Hide Base on Screen Width on my own.

Many thanks!

[FriechModerator]

We’re delighted to assist you with this.

Cheers!

[Author]

Posts