Decrease the Background Hook

Hi Ritesh,

Try this CSS:

.single-product .summary.entry-summary p.has-text-color.has-background {
    max-width: 276px;
}

Let me know :)

Hi Ying,

Thanks for this help.

The CSS Provided to you are working fine in Mobile Preview.
Only the height is not getting changed

But the CSS is not working in Desktop view

" I want to keep the text (E.g Formulated in Australia) is small size with a small background

Please help

Ritesh

Hi there,

It's not working on desktop because you have it wrapped on @media{} rule. Make sure it's outside of the rule so it applies to all viewports. The CSS has a syntax issue. https://share.getcloudapp.com/nOuPb01W

This line:

@media (max-width: 768px) {
    #secondary-navigation {
        display: none;
    }
.single-product .summary.entry-summary p.has-text-color.has-background {
    max-width:276px;
	  max-height: 70px;
}

Should be:

@media (max-width: 768px) {
    #secondary-navigation {
        display: none;
    }
}
.single-product .summary.entry-summary p.has-text-color.has-background {
    max-width:277.64px;
    max-height: 70px;
}

Btw, the exact with is 277.64pxif you want pixel perfect width size between the 2.