Only Feature some element on desktop and some on mobile

Store Design
1

Hi,

I coded a “shop now” button into my header and it looks like:

Dan664_0-1659064028564.png
Dan664_0-1659064028564.png1484×830 261 KB

Now im really happy with it, but if i switch to mobile it looks really squashed/ unatural:

Dan664_2-1659064115159.png
Dan664_2-1659064115159.png468×802 324 KB

Im happy with the way it looks on desktop. Is there a way that i can make it show up on mobile below the logo, to the left of the search icon? It also needs to be proportionatley smaller on mobile, how can i do this?

by the way, the code for the button in the header.liquid file is:

Shop Now

ps: I dont know how to code, I was just following the instructions on another post

2

@Dan664 - can you please share your website link?

3

sure :). This is only a draft so it is not published so i can only send a preview link, it should work for 2 days: https://y6op6a6y01by5aky-52859076779.shopifypreview.com

4

@Dan664 - one issue is that you have logo in center whereas button is added to the right side as you can see in screenshot, hence it is di0f0ficult to take this button to center on mobile, instead if theme is allowing you to put button in center then it is possible

suyash1_0-1659067107734.png
suyash1_0-1659067107734.png1366×768 261 KB

5

I coded the button in as my theme did not have an option to put a button in the header. I was just wondering if I could put the button below the logo on mobile

6

@Dan664 - yes you can, give unique ids to these buttons, so depending on screen we can hide/show them

7

ok, well if I cant move the button it is probably better to hide it on mobile. How can i do that?

8

@Dan664 - you have coded it , replace code line you added with this one

and then please add this given css to the very end of your styles.css file

@media (max-width: 767px){
.hide_on_mobile{display:none; visibility:hidden;}
}
9

thanks!!