Different html dimension for mobile and desktop

Shopify Discussion
1

Hi Everybody

I would like the headline on this product page to be bigger desktop, but show the way that it does right now on mobile. How do I accomplish this?

https://www.prospect-prints.com/products/satin-posters-210gsm?variant=45609174368556

Right now, I’m using an app called Globo Product Options and they have an HTML bar in their headline bar. Ideally, I would like the headline to be above the price, but then I need to edit the title instead which I don’t have the skills to do. So can someone help me do that or help me with some code that hides the current headline on the desktop and replaces it with another HTML headline?

Thanks

2

Hi Ferris1,

Let’s start with the title in desktop:

First you need go in your code here:

edit code.jpg
edit code.jpg320×362 11.1 KB

On the left side go to assets folder and find theme.css, go at the very end and add these lines:

@media only screen and (min-width: 768px){
.gpo-app .gpo-element > img {
height:200px !important;
}
}

Let me know if it works - it should make it bigger for screens bigger than mobile.

Do you mind providing some screenshots and more context for the other request?

Thanks,

Boost Shop