Hi,
The extra space below the homepage slider is caused by the Smush lazy load feature, I disabled it for you and now there is no space, please clear your browser cache and check.

Best regards,
Mike

Hi,
Thank you for the feedback, but unfortunately I don’t have a way to test this as I only have a free account with Browserstack.
I do have an old Mac and when I check in Safari Responsive Design Mode for an iPad it works correctly, but I’m sure this is because it updates often which I assumed was the case with all IOS devices, will your iPad not update?

Best regards,
Mike

Hi,
Thank you for your patience, your icon circle element seems to be hidden on mobile devices with the Element Visibility option:

try disabling this.
Then try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (max-width: 900px) {
  #top #wrap_all .av-icon-circles-container {
    margin: 0;
    width: 100%;
    padding-bottom: 100%;
  }
}

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.
Please note that iPads & iPhones can be hard to clear the cache, often you need to also clear the history to fully purge the cache, following these steps for Safari and note Step 4 where you will Clear the History.

Best regards,
Mike

Hi,
To remove the left padding in the toggles try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top .av-minimal-toggle .toggle_content {
    padding: 12px 35px 11px 0;
}

To remove the icon from the linked images go to Enfold Theme Options ▸ Advanced Styling and enable Linked Image Overlay then choose No Icon

Best regards,
Mike

Hi,
This was because the color section height is set to 100% of screen height which doesn’t count for the socket, I see that you had so css to adjust this for desktop and mobile but not for mobile, so I added this to your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (max-width: 767px) { 
body#top {
height: 100vh;
}
#socket > .container {
padding-left: 0;
padding-right: 0;
}
#top #my_section {
    height: calc(100vh - 120px);
}
}

for my Android device height: calc(100vh – 120px); worked for me but feel free to adjust for your device.
Please clear your browser cache and check.
Best regards,
Mike

Hi,
Thanks for the test page, for #1 try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

.togglecontainer.av-minimal-toggle .single_toggle {
    border-bottom: solid 1px #D3D3D3;
}
.togglecontainer.av-minimal-toggle .single_toggle .toggler {
    padding-left: 0;
}
.togglecontainer.av-minimal-toggle .single_toggle .toggle_icon {
    display: none;
}

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.
For #2:

.grid-sort-container .grid-entry .inner-entry {
    box-shadow: none;
}
.grid-sort-container .grid-entry .grid-content {
    padding-left: 0;
}

For #3:

.logo.avia-svg-logo img, .logo.avia-svg-logo svg {
	max-width: 110px;
}

For #5 when I check the product images in the grid it follows the 400×495 aspect ratio and shows at 254×205, it is smaller than the 400×495 that you choose to show in the element settings because you are showing 4 columns and there is not enough room to show the images at that size since your max container width is 1200px

Best regards,
Mike

Hi,
Thank you for the link to your site, when I check your logo it hangs out of the header and over the page content on desktop and mobile, please see the screenshots in the Private Content area.
As I read your original post again you seem to be asking about the scrolling mode of the mobile header, but on mobile devices the header is not sticky or fixed by default and I don’t see any customization to make the mobile header fixed, is this what you are asking for?
If so try this css:

@media only screen and (max-width: 767px) { 
.html_header_sticky.html_mobile_menu_tablet #top #wrap_all #header,
.html_header_sticky.html_header_transparency #top #wrap_all #header,
.html_header_sticky #top #wrap_all #header {
    position: fixed;
}

.html_header_sticky #top #header_main .container,
.html_header_sticky #top .main_menu ul:first-child>li a {
    height: inherit !important;
    line-height: inherit !important;
}
.html_header_sticky #top #wrap_all #main {
    padding-top: 119px !important; 
}
}

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hey joneszelasko,
Thank you for your question, as I understand your question you would like to change the size of your featured image in your posts to 1200 x 630,
You can do this with this code to the end of your child theme functions.php file in Appearance ▸ Editor:

add_filter( 'avf_modify_thumb_size', 'enfold_customization_modify_thumb_size', 10, 1 );
function enfold_customization_modify_thumb_size( $size ) {
  $size['entry_without_sidebar'] = array('width'=>1200, 'height'=>630, 'crop' => true);
  return $size;
}

Then use the plugin Regenerate Thumbnails to resize the images.
Please note that the code above sets the crop to “true” and I believe this is correct for your situation, but if not try changing it to “false” and regenerate the images again.

Best regards,
Mike

Hi,
Thank you for your patience, I changed your mobile css to this:

@media only screen and (max-width: 768px) {
html.responsive.html_entry_id_10706,
html.responsive.html_entry_id_10713,
html.responsive.html_entry_id_12154,
html.responsive.html_entry_id_12438,
html.responsive.html_entry_id_12020,
.responsive #top.page-id-10706,
.responsive #top.page-id-10713,
.responsive #top.page-id-12154,
.responsive #top.page-id-12438,
.responsive #top.page-id-12020 {
overflow: hidden;
}
}

please clear your browser cache and check.

Best regards,
Mike

Hi,
Thanks for the login, I see that many of your accordions have extra divs with toggle IDs when you look in the “text” tab of the editor:

Try removing these so there is only text in these fields and Then clear your browser cache and any cache plugin, and check.

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike

Hi,
To avoid the date try this css:

#top .avia-content-slider .slide-meta time {
    display: none;
}

For your 3 other pages css would probably be the best solution, let us know if you need help adjusting the css above for your other 3 pages.

Best regards,
Mike

Hi,
Glad to hear this helped, unless there is anything else we can help with on this issue, shall we close this then?

Best regards,
Mike

Hi,
Yes, those are the columns that I’m referring to, they have a background image that is causing the white behind the text.

Best regards,
Mike

Hey bemodesign,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

.html_elegant-blog #top .post-entry .post-meta-infos, 
.html_elegant-blog .avia-content-slider .slide-meta,
#top .news-time {
	display: none;
}

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.

Best regards,
Mike