Hi,

To fix the instagram image overlay width on hover please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

#top .av-instagram-item .image-overlay.overlay-type-image {
	left: 0 !important;
	width: 100% !important;
}

Best regards,
Vinay

Hey norcalnathan,

Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

			
#footer .widget {
	margin: 0 !important;
}

#footer .textwidget{
	padding-top: 20px;
}

Best regards,
Vinay

Hi,

Thank you for the clarification Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

@media only screen and (max-width: 989px) {
	#header .widget {
		margin-top:130px;
		transform: scale(.5)!important;		
	}
	#header .widget a {		
	color:#FFF!important;
	}	
	.responsive.html_mobile_menu_tablet .container #advanced_menu_toggle, .responsive.html_mobile_menu_tablet #advanced_menu_hide{
	transform:translateY(13vh);
    }

.responsive.html_mobile_menu_tablet #header_main_alternate {
    display: block!important;
}}

@media only screen and (max-width: 767px) {
	#header .widget {
		margin-top:70px;
		transform: scale(.5)!important;	
		min-width:200px;	
		margin-left:-50px;
	}
	.responsive.html_mobile_menu_tablet .container #advanced_menu_toggle, .responsive.html_mobile_menu_tablet #advanced_menu_hide{
	transform:translateY(11vh);
    }}

Best regards,
Vinay

Hi,

I believe you are trying to achieve something like the screenshot attached?

Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

@media only screen and (max-width: 989px) {
	#header .widget {
		display:none!important;
	}
	.responsive.html_mobile_menu_tablet .container #advanced_menu_toggle, .responsive.html_mobile_menu_tablet #advanced_menu_hide{
	display:none!important;
    }
#top #header.av_minimal_header .main_menu ul:first-child >li > ul {
	display:none!important;
}
#top #header .av-main-nav > li > a .avia-menu-text {
	font-size:13px!important;
}
.responsive.html_mobile_menu_tablet .main_menu .avia-menu, .responsive.html_mobile_menu_tablet #header_main .social_bookmarks, .responsive.html_mobile_menu_tablet #header_main_alternate {
    display: block!important;
}
.av-main-nav > li > a {
    padding: 20px 15px 20px 15px!important;
}
}

Best regards,
Vinay

Hi,

Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

If you like to add this on more pages that has a white background please use the page ID which you can find in the body tag when you right click and inspect the page.

#top.page-id-3628 #header_main {
    background: rgba(0,0,0,0.35)!important;
}

Best regards,
Vinay

Hi,

It appears you have figured out the table border issue, it looks good on my end.

If make changes to the width of the table it will cause some issue in the responsive mode. It is highly advisable to keep the table width flexible or use the builtin table options “Scrollable table” in “Responsive Styling” if you are going to use the below css.

However if you still want to play around with the table width please try the below css

#top .avia-table-1 td {
	min-width:300px;
}

Best regards,
Vinay

• This reply was modified 9 years, 9 months ago by Vinay.