Elementor Pro Custom Product Page Design - Part 3 | Product Data Tabs

Описание: In this part we learn how to customize our product data tabs with CSS.

Download template here:
https://urieljsoto.gumroad.com/l/simp...

Custom CSS:

Product Data Tabs:

/*Inner description tab background color*/
selector #tab-description{
background-color: #F5F5F5;
}
/*Inner additional tab background color*/
selector #tab-additional_information{
background-color: #F5F5F5;
}
/*Inner reviews tab background color*/
selector #tab-reviews{
background-color: #F5F5F5;
}
/*Align tabs*/
.woocommerce div.product.elementor ul.tabs {
text-align: center;
}
/*Description tab style */
selector #tab-title-description{
padding: 3px 40px;
}
/*Additional tab style */
selector #tab-title-additional_information{
padding: 3px 20px;
}
/*Reviews tab style */
selector #tab-title-reviews{
padding: 3px 40px;
}
/*tab top border*/
.woocommerce div.product.elementor .woocommerce-tabs .panel {
border-top: 2px solid #d3ced2;
}
/*Reviews form button*/
.woocommerce #review_form #respond .form-submit input {
background-color: black;
color: white;
border-radius: 0px;
padding: 15px 60px;
}
/*Star rating*/
selector span a{
color: black;
}
/*Reviews form textarea and input*/
selector textarea, selector input, select{
border: 1px solid black;
border-radius: 0px;
margin: 5px 0px 12px 0px;
}
/*additional table*/
.woocommerce table.shop_attributes td p {
padding: 8px 12px;
}
/*689px mobile screen CSS */
@media (max-width:689px){

/*Description tab style */
selector #tab-title-description{
padding: 3px 0px;
}
/*Reviews tab style */
selector #tab-title-reviews{
padding: 3px 0px;
}
/*Additional tab style */
selector #tab-title-additional_information{
padding: 3px 0px;
}
}
/*689px mobile screen CSS */
@media (max-width:496px){

/*Description tab style */
selector #tab-title-description{
font-size:13px;
}
/*Reviews tab style */
selector #tab-title-reviews{
font-size:13px;
}
/*Additional tab style */
selector #tab-title-additional_information{
font-size:13px;
}
}

/*689px mobile screen CSS */
@media (max-width:410px){

/*Description tab style */
selector #tab-title-description{
font-size:9px;
}
/*Reviews tab style */
selector #tab-title-reviews{
font-size:9px;
}
/*Additional tab style */
selector #tab-title-additional_information{
font-size:9px;
}
}

Related Product Background CSS:

.woocommerce ul.products li.product a img{
background-color: #F5F5F5;
padding: 13px
}



🔵 Join Our Facebook Community!
http://bit.ly/urielsotofbgroup

🟢 Tech Support:
https://urielsoto.com/services/

🟢 My Web Agency:
https://vluxdesigns.com/

MY COURSES:

🟣 Elementor Mobile Responsive Course
https://bit.ly/elementormobile

🟣 Website Building Factory Course
https://bit.ly/websitebuildingfactory

PRODUCTS I USE FOR MY WEBSITES:

🔴 Get Elementor Pro - My Favorite Page Builder
http://bit.ly/urielelementorpro​​​​​​​​​

PRIVATE GROUP:

🔵 Join My Patreon & Get Design Downloads
https://bit.ly/uspatreon

CONTACT ME:

My Website: http://urielsoto.com/​
Facebook:   / urielsotodev  
Linkedin:   / uriel-soto-976b3117a