Product title and view product text are not shown clearly on this design

hi

1.Product title and view product text are not shown clearly on this design. i want product title and view product text to get a little above or I would like to put a transparent background product title and view product text

. Slide banner and shop now button is not showing in mobil versiondesktop version slider banner screenshot mobil version iphone5s sllider banner background
2. where can i change popup newsletter picture

Thank you support

1. Try to add the following code snippet to the Custom CSS area in Theme Settings to change category hover design. You also can use other category hover design that initially has different title position and background https://prnt.sc/ih7dzs.

.cat-design-center .hover-mask > h3 {
    background-color: rgba(255,255,255,0.7);
    padding: 20px;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
}

.cat-design-center:hover .hover-mask > h3 {
	padding-bottom: 30px;
}

.cat-design-center .hover-mask > a:last-child {
	margin-bottom: 0;
	margin-top: -30px;
	color: rgba(0,0,0,0.8);
	z-index: 20;
}

.cat-design-center .hover-mask > a:last-child:hover {
	color: black;
}

@media (max-width: 991px) {
	.cat-design-center .hover-mask > h3 {
    padding-bottom: 30px;
}
	
	.cat-design-center .hover-mask > a:last-child {
		color: black;
	}
}

2. It can be found in Theme settings -> Shop -> Promo popup -> Popup background

3. Slider background is showing on mobile. You just see it right white side because some slider background setting was applied that can be found here https://prnt.sc/ih72im. The button is also is present in mobile resolution, you need to adjust some styles for it on slider mobile resolution settings that can be found here https://prnt.sc/ih72rf.

Regards

Thanks for back

whats css code on mobile. Beacause font is big and this css code doesnt work on mobile. Also this code doesnt show in internet explorer.

.cat-design-center .hover-mask > h3 {
background-color: rgba(255,255,255,0.7);
padding: 20px;
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
}

.cat-design-center:hover .hover-mask > h3 {
padding-bottom: 30px;
}

.cat-design-center .hover-mask > a:last-child {
margin-bottom: 0;
margin-top: -30px;
color: rgba(0,0,0,0.8);
z-index: 20;
}

.cat-design-center .hover-mask > a:last-child:hover {
color: black;
}

@media (max-width: 991px) {
.cat-design-center .hover-mask > h3 {
padding-bottom: 30px;
}

.cat-design-center .hover-mask > a:last-child {
color: black;
}
}

3. Slider background is showing on mobile but background image doesnt appear.

1. Try to replace previous code with the following code to fix font display in IE and make the font size smaller on mobile. To apply this code to the all resolutions, make sure you add this code to the Global Custom CSS area in Theme settings. http://prntscr.com/ihopfn

.cat-design-center .hover-mask > h3 {
    display: table;
    background-color: rgba(255,255,255,0.7);
    padding: 20px;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
}

.cat-design-center:hover .hover-mask > h3 {
	padding-bottom: 30px;
}

.cat-design-center .hover-mask > a:last-child {
	margin-bottom: 0;
	margin-top: -30px;
	color: rgba(0,0,0,0.8);
	z-index: 20;
}

.cat-design-center .hover-mask > a:last-child:hover {
	color: black;
}

@media (max-width: 991px) {
body div.categories-masonry .cat-design-center .category-content .hover-mask > h3 {
    padding-bottom: 30px;
		font-size: 16px;
}
	
	.cat-design-center .hover-mask > a:last-child {
		color: black;
	}
}

@media (max-width: 767px) {
body div.categories-masonry .cat-design-center .category-content .hover-mask > h3 {		padding: 10px;
		padding-bottom: 20px;
		font-size: 12px;
}
	
.cat-design-center .hover-mask > a:last-child {
	margin-top: -22px;
	font-size: 10px;
}
}

2. Gradient background image with border is showing in mobile resolution. This can be seen in the screenshot https://prnt.sc/ihopu6. On mobile, you just see right white part of the image https://prnt.sc/ihoq7i. Background position can be changed in the slider settings https://prnt.sc/ihot2k.

Regards

Thank you support

product image size is not like in demo on our home page.

You can control your product images size in Dashboard -> Appearance -> Customize -> WooCommerce -> Product images.

Dashboard -> Appearance -> Customize -> WooCommerce -> Product images.

WooCommerce is not there

Do you have the latest version of our theme and the WooCommerce plugin?

i didnt latest update woocommerce. But theme is update.
Would it matter if I update woocommerce?

Yes, if you have the latest theme version you need to update the WooCommerce plugin as well.

ok it solved.

in this css code. I want to down the area where the text is located and I would like to shrink the font.

.cat-design-center .hover-mask > h3 {
display: table;
background-color: rgba(255,255,255,0.7);
padding: 20px;
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
}

.cat-design-center:hover .hover-mask > h3 {
padding-bottom: 30px;
}

.cat-design-center .hover-mask > a:last-child {
margin-bottom: 0;
margin-top: -30px;
color: rgba(0,0,0,0.8);
z-index: 20;
}

.cat-design-center .hover-mask > a:last-child:hover {
color: black;
}

@media (max-width: 991px) {
body div.categories-masonry .cat-design-center .category-content .hover-mask > h3 {
padding-bottom: 30px;
font-size: 16px;
}

.cat-design-center .hover-mask > a:last-child {
color: black;
}
}

@media (max-width: 767px) {
body div.categories-masonry .cat-design-center .category-content .hover-mask > h3 { padding: 10px;
padding-bottom: 20px;
font-size: 12px;
}

.cat-design-center .hover-mask > a:last-child {
margin-top: -22px;
font-size: 10px;
}
}

Could you please provide us some screenshot what do you want to change?

thanks back

i have added

i want to make font smaller

Hi,

Could you please reupload your screenshots in a size smaller than 512KB?

Thank you in advance

my customer says

You can change this categories design in Theme Settings -> Shop or for the WPBakery element. You need to set an “Alternative” style.

this is not what I want to ask

1. how can i change font size in Alternative” style on all resolution and browser

2 how can i change font size on all resolution and browser in center title design
3 I want center title box to shift it down a bit.

.cat-design-center .hover-mask > h3 {
display: table;
background-color: rgba(255,255,255,0.7);
padding: 20px;
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
}

.cat-design-center:hover .hover-mask > h3 {
padding-bottom: 30px;
}

.cat-design-center .hover-mask > a:last-child {
margin-bottom: 0;
margin-top: -30px;
color: rgba(0,0,0,0.8);
z-index: 20;
}

.cat-design-center .hover-mask > a:last-child:hover {
color: black;
}

@media (max-width: 991px) {
body div.categories-masonry .cat-design-center .category-content .hover-mask > h3 {
padding-bottom: 30px;
font-size: 16px;
}

.cat-design-center .hover-mask > a:last-child {
color: black;
}
}

@media (max-width: 767px) {
body div.categories-masonry .cat-design-center .category-content .hover-mask > h3 { padding: 10px;
padding-bottom: 20px;
font-size: 12px;
}

.cat-design-center .hover-mask > a:last-child {
margin-top: -22px;
font-size: 10px;
}
}

1. Add this code snippet to your desired resolution Custom CSS area to change the Alternative category title font size on this resolution. Code placement example https://gyazo.com/b131469705126af73e8c20432f87ecb3

body .cat-design-alt .hover-mask > h3 {
	font-size: 20px;
}

2. Same as previous for Categories Design Center.

body .cat-design-center .hover-mask >h3 {
	font-size: 15px;
}

3. Use this code snippet instead previous, to place title at the bottom. You can adjust position more precise by editing string bottom: 20px;.

.cat-design-center .hover-mask > h3 {
    display: table;
    background-color: rgba(255,255,255,0.7);
    padding: 20px;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
}

.cat-design-center:hover .hover-mask > h3 {
	padding-bottom: 30px;
}

.cat-design-center .hover-mask > a:last-child {
	margin-bottom: 0;
	margin-top: -30px;
	color: rgba(0,0,0,0.8);
	z-index: 20;
}

.cat-design-center .hover-mask > a:last-child:hover {
	color: black;
}

body .cat-design-center .hover-mask {
	top: auto;
	bottom: 20px;
}

@media (max-width: 991px) {
body .cat-design-center:hover .hover-mask > h3 {
	padding-bottom: 20px;
}
	
.cat-design-center .hover-mask > a:last-child {
	color: black;
}
	
.cat-design-center .hover-mask > a:last-child {
	display: none;
}
}

@media (max-width: 767px) {
body div.categories-masonry .cat-design-center .category-content .hover-mask > h3 {		
	padding: 10px;
}
}

Regards

[Author]

Posts