Best way to size cornerstone elements for specific resolutions?

[AK49_Logan_907]

Hi,
I’m going though and trying to optimize our website for mobile since we have it looking decent on desktop currently.

What is the best way to center things in this example?
a. Do I hide the element for mobile and tablet, duplicate it and make the duplicate only available on mobile and tablet then center that element?
b. Is there a way to edit the same element for certain devices without having to create more with resolution restrictions?

Examples from what I’ve done previously.

So my main question, what is the best way to configure mobile “smaller resolutions” in cornerstone? Is the way I’m doing a work around but there is a more efficent way?

Thank you again, as always!

[albrecht]

Hi @AK49_Logan_907,

Thanks for writing. Your approach where you hide elements in certain devices is good, in fact we also use that in some of our projects but the only downside is that you will need to update both elements if you need something changed. But if it’s just a few elements then I don’t see any problem on using that method.

Another way is to add a css that will only take effect if a screen width is met. An example css would be.

@media (max-width: 767px) {
  .custom-button {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}

To learn more about it, please visit this link https://www.w3schools.com/cssref/css3_pr_mediaquery.asp.

Hope it helps.

[AK49_Logan_907]

Thanks it helps a lot, appreciate all the help as always!

[friech]

We are happy to help,

Cheers!