How to remove text and button on mobile mode

Solved
Tourist
6 0 1

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.

0 Likes

Hello 

 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 */
}
} 

 theme_css.jpg

Want to modify or custom changes on store hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Content Writer | Digital Marketing | SEO Expert | Site Optimization | Web Design | Web Development
0 Likes

Success.

Shopify Staff
Shopify Staff
601 35 73

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

 

Katy | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Tourist
6 0 1
##- Thank you so much Katy! It worked perfectly!-##
1 Like
Tourist
6 0 1

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.

 

howtocentertitle.png

 

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

0 Likes
Shopify Staff
Shopify Staff
601 35 73

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

Katy | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Tourist
6 0 1

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:

imageNeedsToBePlaced.png

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!

 

0 Likes

Success.

Shopify Staff
Shopify Staff
601 35 73

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:

 

06-18-ptr43-4tpts

 

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

Katy | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Tourist
6 0 1

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:howToReduceSpace.png

 

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!

0 Likes
Tourist
6 0 1

howToReduceSpace.png

0 Likes