Hi Nikko,

Thanks for that. I have it figured out now. I added as per instructions and it worked. It left some padding at the top which is where the spacing for the header was. (Originally it was white space I had an issue with but once I changed the color I was able to figure out what I needed to change to remove the padding.)

I added this code to my custom css and it killed the space. The original padding was 88px and I switched it to 0px.

.html_header_transparency #top .avia-builder-el-0 .container, .html_header_transparency #top .avia-builder-el-0 .slideshow_caption {
padding-top: 0px;
}

Just documenting for others if they need a fix. Thanks for all of your help! It is much appreciated!!

Have a great day!
Will

Please mark as closed

Thanks for the info.. One last question to clear up for this one.. (And a huge thank you for guiding me on this.. Could not have done this without you.. I appreciate it!)

I entered debug mode and created a button and captured shortcode..

Shortcode for button: [av_button label='GET OFFER' icon_select='no' icon='ue800' font='entypo-fontello' size='small' position='center' label_display='' title_attr='' color='dark' custom_bg='#1b4074' custom_font='#1b4074' link='manually,http://' link_target='' id='' custom_class='' av_uid='av-k8ag0jq2' admin_preview_bg='']

I need to set the button to link to a section on the page.

Specifically this section (pulled from the css name): .home #av_section_2 .container

Can you show me where I need to add that to the shortcode so that when a user clicks on the button it will take them to the section in question?

I really appreciate the help. I have been playing with it and looking at the documentation but haven’t figured it out.

Thanks! Have a great day!
Will

Thanks guys!! I combined both of your solutions and played with the percentages and that worked great. I did add a @media query for mobile only as well and took Victoria solution and made the percentages 100% for that one. (Just for anyone else that might want to do this.)

Thanks for all of the advice. You guys are fantastic!

This is specifically what I added to enfold CSS:

/*Victoria’s Solution */

#element_avia_1_1 {
width: 48%;
margin-right: 10px;
}
#element_avia_2_1 {
width: 50%;
}
#element_avia_3_1 {
width: 48%;
margin-right: 10px;
}
#element_avia_4_1 {
width: 50%;
}
#top .avia_ajax_form .first_form {
clear: none;
}

/*Rikard’s Solution */
@media only screen and (min-width: 768px) {
.home #av_section_1 .container {
padding: 0 20%;
}
}
.home #av_section_1 .container .button {
width: 100%;
font-size: 20px;

}

/*My Addition for mobile */
@media screen and (max-width: 500px) {
#element_avia_1_1 {
width: 100%;
margin-right: 10px;
}
#element_avia_2_1 {
width: 100%;
}
#element_avia_3_1 {
width: 100%;
margin-right: 10px;
}
#element_avia_4_1 {
width: 100%;
}
#top .avia_ajax_form .first_form {
clear: none;
}
}

Here is what I was thinking: https://i.imgur.com/imfWSld.png

Small square logo – menu – phone number with icon – button (hover state) that links to contact form on same page..

Not sure where to begin on this one. Any help would be appreciated!!

Thanks,
Will

Perfect solution. Thank you.. Bumped it to 80% to include all of the buttons. That should take care of the church demo too for anyone that imports that demo to use.

Thanks again for the great support!

William

Hi Victoria,

How do I accomplish that? Is there a setting that affects just mobile inside enfold? Would you mind walking me through it?
I was initially thinking of playing with the css to adjust the verbiage and buttons but I am open to your idea if you don’t mind showing me how to do it. Thanks for your time.

Thanks,
William

Hi Basilis,

Thanks for taking a look. I removed the modified css (that I mentioned above) so that you could see the original issue with the button cropping. Only change I made was switch out the church demo slider image with one of my own.

Attaching site link in Private content.

Thanks,
William