Remove inner container for mobile

Support
#1

Hi,

I have some elements that have the inner container set to on and that is fine, but I would like them to be full-width on mobile. How can I do that? Is there a way to set the inner container to off when on mobile?

THanks in advance.
Dennis

#2

This is not directly related, but can you also tell me how I can shorten text that is too long?
I tried overflow: ellipse; but it doesn’t work.

Is there an option for the in the text element in cornerstone?

Thanks!
Dennis

#3

Hi There,

Thanks for writing in!
There is two way to remove the inner container from mobile device,
1st. Add custom media query css for mobile device
Example:

    @media (min-width:500px){
    .sectionclassName {
      width: 100%;
      max-width: 100%;
     }
   }

2nd: You can create a separate section with no inner container and hide it in desktop or tab view in consomize section of cornerstone,

Hope this is clear!

Regarding your other question, if I understand it properly, you want to trim some amount of text from a paragraph or a section without editing it.
If that is the case, please send us the URL where you have the issue, so that we can have a look.

Thanks

#4

Hey, thank you for the help!

Here is the URL: https://soundtrackz.de/filme/prinzessin-mononoke

When you scroll down a little you can see that there is some very long text. I would like it to be automatically cut off and show … when it doesn’t fit in the container. Its se to position: absolute, maybe thats why it didnt work before.

Thanks in advance.
Dennis

#5

Hi There,

Please change your custom CSS from:

.song-title-overflow {
    white-space: nowrap !important;
    width: 90%;
    overflow: hidden;
    text-overflow: ellipsis !important;
}

To:

.song-title-overflow p {
    white-space: nowrap !important;
    width: 90%;
    overflow: hidden;
    text-overflow: ellipsis !important;
}

Hope it helps :slight_smile:

#6

Hi,

thanks for your help. It worked perfectly!

Now, there is one more issue I have with this.

On this page: https://soundtrackz.de/serien/tote-maedchen-luegen-nicht

I put the song name and artist name in the same text element and used CSS to get space between them:

1. Only You Selena Gomez

Is there a way to get the Song name (in this case “1. Only You”) to hide on overflow when it comes to close to the artist name (in this case “Selena Gomez”)? Or is that not possible with the current constellation?

Thanks in advance!
Dennis

#7

Hi There,

Please use this css for the song name.

.song-title-overflow {
    width: 45%;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
}

Let us know how it goes.

Thanks

#8

it worked. Thank you!

#9

You’re welcome.

#10

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.