How to remove text and button on mobile mode

[user_000]

Hello everybody, I am using the Brookyln theme and am not sure how to add the following to my theme.scss.liquid file:

@media (max-width: 600px) {

.carousel-caption {

display: none; /* Hide the carousel text when the screen is less than 600 pixels wide */

}

.button {

display: none; /* Hide the button when the screen is less than 600 pixels wide */

}

If someone could let me know, that would be great and send me a screenshot of where to add or change the code. In addition, how do I style my company name on my homepage using css? I would like use to center the second part of my company store name, such as the following:

Coffee Cup

      Cafe --get the cafe in the center under Coffee Cup Thanks.

[Katy · Accepted solution]

Hi, @user_000 !

Katy here from Shopify. I hope all is well. 

@oscprofessional is indeed 100% on where you should add this code - you can place it at the bottom of the CSS - your Custom Style Sheet. 

For the Brooklyn theme however, we will need to change the code here to replace the .carousel-caption class for it to work correctly. I have taken a look on my own test store and the following code should do the trick for you: 

@media screen and (max-width: 600px) {
      .hero__slide a.hero__cta, .hero--adapt a.hero__cta, .hero__subtitle {
        display: none; 
   } 
}

As this is located within your theme's CSS I strongly recommend to test this in a duplicate version of your theme (if you have not done so already) as this file cannot be rolled back. 

Do let us know how this goes for you.

Regarding your second query. Do you have a link to your store or an example screenshot that you can share here for this? This is the best way for forum users to get a clear idea of what you would like to achieve. 

Cheers,
Katy