Hi,

Great, I’m glad to hear that it’s working. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hi,

Thanks for the update. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hi,

Great, I’m glad that Mike could help you out. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hi,

Thanks for the update. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hi,
For the slider I added this css:

@media only screen and (max-width: 430px) { 
.html_header_top.html_header_sticky #top #wrap_all #main {
    padding-top: 182px !important;
}
}

Best regards,
Mike

Hi,
On mobile there is not enough room for the buttons next to the logo, so they will need to be smaller and under the logo.
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (max-width: 430px) { 
	.responsive #top #header #header_main .inner-container .widget {
    order: 3;
    flex-basis: 100%;
	}
	.responsive #top #header #header_main .inner-container .widget .avia-button.avia-size-medium {
	padding: 12px 5px 10px;
    font-size: 12px;
    min-width: 60px;
	}
	.responsive #top #header #header_main .inner-container .widget>div {
		padding: 0;
	}
	.responsive #top #header #header_main .inner-container .widget>div>div {
	text-align: center;
	}
}

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

Hi,
Thank you for your patience and the video, I think I understand what you were hoping to do, but I couldn’t find a way to change this. But I did come up with a solution that may work for you. In your video I noticed that your example post was created with the ALB (Advanced Layout Builder) so I assume all of them are. So I created a couple of test posts, not pages, on my test site and added a couple of images with the Image element and one with the Text element, although I believe you are only using the Image elements.
I set all of the images to medium size.

Then I used this function in my WPCode plugin as a PHP snippet, it will also work in your child theme functions.php:

function adjust_image_attributes_for_single_posts($content) {
    if (is_singular() && in_the_loop() && is_main_query()) {
        $content = preg_replace_callback(
            '/<img(.*?)>/i',
            function ($matches) {
                $new_img_tag = preg_replace('/width=".*?"/i', 'width="auto"', $matches[0]);
                $new_img_tag = preg_replace('/height=".*?"/i', 'height="auto"', $new_img_tag);
                $new_img_tag = preg_replace('/sizes=".*?"/i', 'sizes="(max-width: 1030px) 100vw, 1030px"', $new_img_tag);
                $new_img_tag = preg_replace('/class=".*?size-medium.*?"/i', 'class="size-large"', $new_img_tag);
                return $new_img_tag;
            },
            $content
        );
    }
    return $content;
}
add_filter('the_content', 'adjust_image_attributes_for_single_posts', 99);

It replaces the image class size-medium with size-large, which is not important but I thought it may help with some related css, and it changes the image width & height attribute to auto and changes the size attribute to 1030px so the large image is used from the image srcset.
This worked for me in ALB posts, I also tested in a Classic Editor post and it worked for the images in the post without changing the featured image, which is good because that is a different size and you would not want to change it.
The only thing that I noticed was that on the Classic Editor post the images didn’t seem to change in size even though the source code changed, and this was because to container width of the post was narrow, when I added so css to make the container full width the images showed correctly.

#top .fullsize .template-blog .post .entry-content-wrapper {
    max-width: 100%;
}
#top .fullsize .template-blog .post .entry-content-wrapper > * {
    max-width: 100%;
}

I don’t think this will matter for you, but I’m adding it for future readers that have this issue.
So give this a try and see if it helps you.

Best regards,
Mike

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

@media only screen and (max-width: 767px) { 
	#top .avia-icon-list .iconlist_icon {
		margin: 0 0 10px 0;
	}
	#top .avia-icon-list li {
		padding-bottom: 0;
	}
}

then look in your icon list content area, you have a extra empty paragraph tag from a empty line, probably from a “return” key stroke, you may need to look in the “text” tab to remove it.

This adds a empty space under your icon list:

Best regards,
Mike

Hi,

Thanks for the update. Something in the content on the front page seems to be breaking the layout for some reason. I created a test page, please see private. When I remove the slider on the top, the responsivness starts working again. Could you try to recreate the slider on the test page, to see what happens then?

Best regards,
Rikard

Hi,
Thank you for the link to your site, I see that your tab images are large and the title font is also large for all of the tabs to fit on a small mobile screen, the tabs are designed to float off of th screens so the images and text can be large.
But if you want them to all fit on the screen try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (max-width: 767px) { 
.av-tab-section-tab-title-container .av-tab-section-image {
	width: 80px;
}
#top .av-section-tab-title {
    padding: 10px 5px 0px 5px;
}
.av-tab-section-tab-title-container .av-inner-tab-title {
    font-size: 12px;
    word-break: break-all;
}
}

I tested this on a 425px screen size, please see the screenshot in the Private Content area, if you have a smaller screen feel free to adjust the values smaller to suit your needs.

Best regards,
Mike

Hi,
Thank you for the link to your site and your patience, you have another open thread about PHP v8 issues and in that thread I believe that I found that your child theme contains out dated theme files causing errors.
I believe this is also related to the same issue because when I tested by enabling the parent theme, I didn’t find the error you posted in this thread.
Please try following the steps that I posted in the other thread and hopefully it will also sort this thread out too.
Thank you for your patience and understanding and for using Enfold.

Best regards,
Mike

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

.avia_mobile .av-parallax.avia-full-stretch.active-parallax {
	display: none !important;
}
.avia_mobile #top .av-parallax-section {
    transform: none !important;
}

This was disabled because some older iPhones will not display parallax correctly due to a iPhone limitation.
If you have any trouble viewing this on a iPhone then please remove the css and note that this will not work for you.
I have tested this on my test site with a Android device and this works correctly.

Best regards,
Mike

Hi,
The page that you linked to becomes a 404 error, so I was not able to examine.
I found a similar situation on your homepage so I will explain from it, on mobile you have the column position set to overlap the top image on your page with this setting:

so there is a space where the height of the column adds to the element that it is in, in this case the color section.
So you could add a negative bottom margin to the column to pull up the next element on mobile:

I did this for you please check.
But please note that you are using parallax animation so the column moves upword as you scroll down so at some point the column will be out of view and the background will show, this is expected with this animation.

Best regards,
Mike

Hey acscreativenew,
Thanks for the link to your site, when I check your column settings for the first row I see that you have selected Same order as defined for desktop,

if you want the image first you should choose Reverse order, I have done this for you.

Now the image is on top, please clear your browser cache and check.
Please see the screenshot in the Private Content area.

Best regards,
Mike

Hi,
It looks like you have created duplicate threads, I solved this in your other thread please check.

Best regards,
Mike

Hey villasanarenteriasimon,
You can try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top .mejs-overlay-loading {
  display: none !important;
}

After applying the css, please clear your browser cache and check.
If this doesn’t help please include the url to the page in question so we can take a closer look.

Best regards,
Mike

Hi,
Thank you for the link to your page, I have not seen this error before, but typically the inline css does not cause this. WordPress wraps spaces with the “p” tags automatically, but it should not be wraping the inline css.
You say that it is elusive and sometimes goes away after saving pages or styles or something and it’s only on this page, so to solve only on this page with css try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top.page-id-13874 #footer-page > p {
	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

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

#top #wrap_all .av-video-slide .avia-slide-wrap, #top #wrap_all .av-video-slide iframe {
	background: #fff;
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
Thanks for the feedback, it looks like you have added the team member content into a accordion element under the team member element instead of adding it into the team member description field.
Can you use the team member description field for the content and remove the accordion elements?
Try creating a test page with three team member elements like this and include a admin login for us and we help you create the popups like in the thread.

Best regards,
Mike