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

[oscprofessional]

Hello user_000,

 You can add your css code in theme.scss.liquid file.

You will find this file in

Dashboard -> Online Store- > Theme -> Edit code -> assets -> theme.scss.liquid.

At the end of the file you will can add your code.

@media screen and (min-width: 480px)

@media screen and  (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 */
}
} 

 

[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

[user_000]

##- Thank you so much Katy! It worked perfectly!-##

[user_000]

Hello,

I just have another question: I would like to center House under Boston Bean (Boston Bean House is the name of the store in the header).

In html I am used to using <br> and <center></center> tags to do the job.

If someone could please let me know, that would be great. Thanks.

[Katy]

Hi, @user_000 !

I so am glad to hear that it helped and thank for your screenshot regarding your second query- this is very useful.

While possible to adjust this (though I would recommend doing so via your external style sheet - theme.scss.liquid,  rather than using in-line styling in your HTML) have you however considered adding a custom logo to your store? While we provide you with this text-based logo, having a custom logo is what sets your brand apart from others. 

A logo is essentially the face of your business and when working online, it is important to consider adding this. This is something that can be eye-catching which is great for grabbing your customers' attention and for being memorable to them thereafter. It also allows you to showcase your store, as well as allowing you to have consistent branding across each channel that you plan to sell from. There is lots more info on the benefits of this in our blog here. 

If you would still like to center this text, you can add the following code to the bottom of your CSS:

.site-header__logo {
text-align: center;
}

However I would encourage you to create a logo. There are some great tools to help with this references in the above guide, as well as our own free tool - Hatchful too. 

I hope this helps. If you have any questions - feel free to let me know.

Cheers,
Katy

[user_000]

Hello,

Thank you again for your help. I have added a logo and now my website really looks good. I am just wondering, how would I add an image on the home page in the About us section. I would like to add the image to the left of the content. Here is an example of what I mean:

Is there a way I can do this using the liquid code?  Does liquid use Bootstrap? I would need to have the image be responsive. If you could please let me know, that would be great.

Thanks again!

[Katy · Accepted solution]

Ah that is brilliant to hear,  @user_000  great stuff!

Regarding the image on your homepage, there is the option to add something similar with the theme’s in-built, custom content section. You can add this via your: Theme customizer > Add section > Image with text. Let me show you on my sample store:

This can be aligned to the left or right, and can be moved on your homepage using the drag and drop function. You can even add a button with a link to your blog for example. Do you think this would work for you?

In terms of responsiveness - absolutely! Each theme available from the Shopify theme store is responsive, and is built to be fully adaptive to mobile/smaller devices.

Shopify does not use Bootstrap, no. It has instead its own stye sheet (theme.scss.liquid,  for example). This is built-in to each theme. Generally there is no need to add a style library on top of this, and it may prove more harm than good in trying to get these to work with one another. This would not be something that our team would be able to help with or support should you get stuck.

If you are interested in editing code, I suggest having a look through the liquid style options in our guide here and here, as well as in our design tutorials. Alternatively if you would like for our Theme support to help, we offer 1 hour Design time on all free Shopify themes, provided that you are on a paid plan. 

I hope this helps!

Cheers, 
Katy

[user_000]

Hello,

Thank you again for all your help. Can you please let me know, how would I reduce the space below the slideshow. Please see photo below:

In addition, how do I get the About Us title and text to align at the very top of the photo. If you could please let me know, that would be great.

Thank you!

[user_000]

[Katy]

Hi, @user_000 !

Apologies for the delay in getting back to you. Yes, I can help you with this. It will involve that bit more customizing - both to a section and also to your CSS. I do suggest, once again to first try this out in a duplicate version of your theme. 

If you could access your theme's code once more. The area we will first adjust is the featured-row.liquid section. In here if you could search for the <h2> tag with the class= h3 . It should look something like this:

{% if section.settings.title != blank %}
          <h2 class="h3">{{ section.settings.title | escape }}</h2>
        {% endif %}

On my test store, this is around line 31. 

You will need to cut this from here, and paste it just underneath the following line of code:

 <div class="feature-row__item">

This is higher up on the page, and should be around line 5.  Then click save. 

From here we can then style this and also fix it on mobile/smaller devices, so that it remains centered on these instead. To do this you will now need to access your CSS.  At the very bottom of this sheet, you can paste:

.page-width .feature-row .h3{
  padding-top:20px;
  padding-bottom:20px;
  padding-left:20px;
  position:relative;
}

And the following code for smaller screens:

   @include at-query($max, $small) {
.feature-row__item h2.h3 {
    text-align: center;
  padding-bottom: 20px;
}
    }

This should do the trick for you. Do let me know if you have any questions!

Cheers,

Katy