Return to previous page

Header image category product error responsive mode

This topic has 28 replies, 4 voices, and was last updated 5 years, 8 months ago ago by Olga Barlow

Eduard

Participant

April 6, 2019 at 19:34

please help me in to the problem, I put in a category product header image, but it does not look good in the responsive mode.
you can help me

Thank you very much

https://prntscr.com/n8eske
https://prntscr.com/n8esm5
https://prntscr.com/n8esnz
https://prntscr.com/n8esqg

Please, contact administrator
for this information.

#212075 Copied Theme version: 5.1.6 WooCommerce version: 5.1

27 Answers

Muhammad Zaki

Support staff

April 7, 2019 at 10:37

HI there,

Thanks for your request, please, hold on, our techs will send you the solution tomorrow on Monday.

Regards

#212084 Copied

Rose Tyler

Support staff

April 8, 2019 at 07:35

Hello,

I do not see the image. Have you disabled breadcrumbs?
Background size “cover” (Theme Options > Breadcrumbs > Breadcrumbs background > Background size) means that image will be cropped on different devices because background-size “cover” works in this way https://cssreference.io/property/background-size/
Feel free to ask if you have any other questions.

Regards

#212102 Copied

Eduard

Participant

April 8, 2019 at 09:49

hello in the category product not appear the custom page heading image

https://prnt.sc/n8z23t

#212122 Copied

Rose Tyler

Support staff

April 8, 2019 at 09:54

Hello,

You have disabled the Breadcrumbs for Shop page – http://prntscr.com/n8z4sj
Category page inherits settings of Shop page.

Regards

#212123 Copied

Eduard

Participant

April 8, 2019 at 09:57

ok and now the problem responsive?

#212124 Copied

Eduard

Participant

April 8, 2019 at 09:59

like this

https://prntscr.com/n8esqg

#212125 Copied
Rose Tyler

Support staff

April 8, 2019 at 10:17
Hello,

It is predefined behavior of “cover” background size.
You can add code in Theme Options > Custom CSS > “Custom CSS for mobile” to get a different result. For example, https://prnt.sc/n8zfc4
```
.tax-product_cat .page-heading {
    background-size:  contain;
    margin-bottom: 0px;
}
```
or http://prntscr.com/n8zguy
```
.tax-product_cat .page-heading {
    background-position: 66% center;
}
```
Regards
#212126 Copied
Eduard

Participant

April 8, 2019 at 10:24

i can put the code in the css child theme? how?

#212127 Copied
Rose Tyler

Support staff

April 8, 2019 at 10:28
This code can be added in style.css file of your child-theme, it will affect mobile devices only because of the media query:
```
@media only screen and (max-width: 480px) {
    .tax-product_cat .page-heading {
        background-position: 66% center;
    }
}
```
https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Regards
#212128 Copied
Eduard

Participant

April 8, 2019 at 10:32

perfect thank you very much

#212129 Copied

Rose Tyler

Support staff

April 8, 2019 at 10:33

You’re welcome!

Regards

#212131 Copied

Eduard

Participant

April 8, 2019 at 10:36

it is one problem of space
https://prnt.sc/n8zs62

#212132 Copied
Rose Tyler

Support staff

April 8, 2019 at 10:39
Please change this code
```
@media only screen and (max-width: 480px) {
    .tax-product_cat .page-heading {
    background-size:  contain;
    margin-bottom: 0px;
    }
}
```
to
```
@media only screen and (max-width: 480px) {
    .tax-product_cat .page-heading {
     background-size:  contain;
     margin-bottom: 0px;
     max-height: 100px;
    }
}
```
Regards
#212133 Copied
Eduard

Participant

April 8, 2019 at 10:44

is perfect, another thing and ready. I have a line that I can not get out of css?

https://prnt.sc/n8zvr3

#212135 Copied

Rose Tyler

Support staff

April 8, 2019 at 10:55

Delete this custom CSS code – https://prnt.sc/n901z2 from Theme Options
and this http://prntscr.com/n902pl from style.css file of the child-theme.

Regards

#212137 Copied

Eduard

Participant

April 8, 2019 at 10:59

perfect thank you have a nice day

#212138 Copied

Rose Tyler

Support staff

April 8, 2019 at 11:06

You’re welcome!
Have a nice day too.

Regards

#212139 Copied

Eduard

Participant

April 8, 2019 at 12:42

This code is ok for mobile but for tablet and landscape??

@media only screen and (max-width: 480px) {
.tax-product_cat .page-heading {
background-size: contain;
margin-bottom: 0px;
max-height: 100px;
}
}

#212144 Copied
Rose Tyler

Support staff

April 8, 2019 at 12:54
Please replace the mentioned code by:
```
@media only screen and (max-width: 992px) {
    .tax-product_cat .page-heading {
     margin-bottom: 0px;
     max-height: 300px;
    }
}
@media only screen and (max-width: 768px) {
    .tax-product_cat .page-heading {
     max-height: 200px;
    }
}
@media only screen and (max-width: 480px) {
    .tax-product_cat .page-heading {
     max-height: 100px;
    }
}
```
Regards
#212147 Copied
Eduard

Participant

April 8, 2019 at 13:00

Rose you are the best thankssss

#212150 Copied

Rose Tyler

Support staff

April 8, 2019 at 13:03

My pleasure 🙂

Regards

#212151 Copied

Eduard

Participant

April 8, 2019 at 13:30

for single products i dont need breadcumbs how can i disable

https://prnt.sc/n92iv3

#212158 Copied
Rose Tyler

Support staff

April 8, 2019 at 13:55
```
.single-product .page-heading {
    display: none;
}
```
Regards
#212164 Copied
Eduard

Participant

April 8, 2019 at 14:07

thank you

#212167 Copied

Olga Barlow

Support staff

April 8, 2019 at 14:11

Hello,

You are welcome.

Regards

#212169 Copied

Eduard

Participant

April 8, 2019 at 14:12

I would like to integrate a short code below category on the single product, how can I do it? 🙂

#212170 Copied

Olga Barlow

Support staff

April 8, 2019 at 14:15

Hello,

You can use WooCommerce Hooks if you want to change the order of the elements on the single product page or add any code https://businessbloomer.com/woocommerce-visual-hook-guide-single-product-page/

Regards

#212171 Copied
Viewing 28 results - 1 through 28 (of 28 total)