Hiding a "Text" from "Product Information" only in mobile on Dawn Theme

[Pox]

Hey 🙂

I'm trying to hide a text on the product information section but only for mobile. I have 2 texts to make the product information start lower becouse the image background is larger in the top than in the bottom.

** Also if you know to make that when you pass the mouse in desktop above that text doesn't change to an I shape (like when you're going to write somethin) would be very apreciated**

I have seen a similar post but the solution didn't work.

Store link: poxters.com

Any help is appreciated 🙂

[Columbus_Themes]

I can see what you are trying to achieve here.

You added a white background to each image and those two empty text to align both the top of the image and the headline to be in the same level.

You can do all of this only by adding a padding top to product class on your CSS.

[BSS-Commerce]

Hi @Pox 

To solve your problem, there is no need to add 2 texts like you are doing. You can remove those 2 texts and edit the CSS by following these steps:

1. Please go to Theme > Edit Code

2. Search for the file "base.css" and paste the following code at the end of the file:

@media only screen and (min-width: 750px) {
    .product .product__info-container {
        margin-top: 10rem;
    }
}

Then, you save the file and see the results. If you have any problems, please leave a comment, and we will help you.

I hope that this can help you solve the issue.

[Cedcommerce]

Hello @Pox, 

To resolve this issue, you need to add the below-provided code at the end of your base.css file, this will remove the extra whitespace below the product image.

Code:-

.product__text.subtitle{

display: none!important;

}

You can check the before and after results below. 

Before:-

image.png

After:-

image.png

Hope this helps. Let us know if you need any further help with this.

All the best, 

CedCommerce