Hi Yigit,

Thankyou for the code, I tried to implement the code in the Enfold Custom CSS as follows:

@media only screen and (min-width: 786px) and (max-width: 1000px) {
.avia-icon-list .iconlist_icon {
height: 50px;
width: 50px;
line-height: 50px;
font-size: 25px;
margin-right: 15px;
}
}

@media only screen and (min-width: 786px) and (max-width: 1000px) { .avia-icon-list .iconlist_content_wrap { margin-right: -10px!important; }}

There still seems to be a problem with the text staying the same size and icons cut in half due to smaller column size on iPad / iPhone. Can you check http://www.naturaloutlook.com on your mobile device…I tried it on a new iPad mini….

Can you see any errors with the code?

Thankyou

Gary

Hi, whith chrome don’t works too sometimes……..

I put my code of “custom.css”.

——–

@media only screen and (min-width: 768px) {
/* Add your Desktop Styles here */

h1, h2 {
font-family: “brandon-grotesque”,sans-serif; font-weight: 900; font-style: normal;
}

h3, h4, h5, h6 {
font-family: “brandon-grotesque”,sans-serif; font-weight: 900; font-style: italic;
}

/* META */
#header_meta { background: #600318; }

/* HEADER */
#header_main { height: 200px; line-height: 200px; background: #600318; border: none; }
#header_main .logo { height: 200px; line-height: 200px; top: 0px; }

/* POSICION DEL MENU */
.main_menu
{height:25px; top:75px; right: 0px;}

/* POSICION DE LA BARRA */
.main_menu ul li a {height: auto !important; line-height: 40px !important; }

/* MENU 1 */
.main_menu ul:first-child > li > a
{ font-size: 20px; font-family: “brandon-grotesque”; color: #FFFFFF !important; padding:2px 7px; }
.main_menu ul:first-child > li > a:hover
{ color: #5B8C00 !important; }

/* MENU 2 */
#top .main_menu .menu li ul a
{ font-size:12px; line-height: 9px !important; font-family: “Source Sans Pro”; color: #000000 !important; }

/* TITULO */
.title_container .main-title { display: none; }

/* PESTAÑAS WOOCOOMMERCE */
#top .woocommerce-tabs .tabs li a {
cursor: pointer;
margin: 0px 0px 0px 0px;
display: block;
float: left;
z-index: 2;
position: relative;
padding: 12px 16px;
top: -1px;
font-size: 11px;
-moz-user-select: none;
border-style: solid;
border-width: 1px;
}

}
——–

Thanks so much!!!

Xavier.

Ho Josue,

Yes I do mean the paragraph, and I see the changes now. Maybe it takes a couple of hours to adjust, I’ve been working on the site all morning without seeing this change.

I would also would like to change the font size of the sidebar, inside the buttons and the main menu in header. I think I figured out what the syntax for the sidebar would be:

.sidebar p {
font-size: 14px !important;
}

What would be the syntax to change the button fontze and the main menu in the header?

Thank you again for your help!

Kind regards,

Thanks Yigit,

Should I replace tis code with your suggestion:

@media only screen and (min-width: 786px) and (max-width: 1000px) {
.avia-icon-list .iconlist_icon {
height: 50px;
width: 50px;
line-height: 50px;
font-size: 25px;
margin-right: 15px;
}
}

Gary