Return to previous page

Header image category product error responsive mode

This topic has 28 replies, 4 voices, and was last updated 5 years 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
1 2

Viewing 20 results - 1 through 20 (of 28 total)