BTW also tried adding specific CSS that I found elsewhere in this forum to the Quick CSS settings but didn’t result into what I wanted.
Cfr. https://kriesi.at/support/topic/how-to-add-margins-or-padding-on-the-left-and-right-sides-of-the-content-only/

Danke !
Dann kann ich das jetzt auch in dem entsprechen Topic so mal weitergeben. ;)

da ja die html_entry_id_123 immer auch der page / post /portfolio etc. entspricht könnte man dann durch kommata getrennt es für mehrere Seite umdefinieren. Cool !
hat den Vorteil, das selbst für den html hintergrund es über die socket bg definiert wird – und so bei Seiten mit wenig Content das auch gesetzt wird.

function my_avf_dynamic_css_after_vars( $output = '' )
{
	$output .= "\n";
	/*** Override a defined var for a specific page id*/
	$output .= ".html_entry_id_46364 , .html_entry_id_2407  {\n";
	$output .=		"--enfold-header-color-bg: #aaa;\n";
	$output .=		"--enfold-header-color-bg2: #aaa;\n";
	$output .=		"--enfold-main-color-bg: #aaa;\n";
	$output .=		"--enfold-footer-color-bg: #aaa;\n";
	$output .=		"--enfold-alternate-color-bg: #aaa;\n";
	$output .=		"--enfold-alternate-color-bg2: #aaa;\n";
	$output .=		"--enfold-socket-color-bg: #aaa;\n";
	$output .=		"--enfold-socket-color-border: #aaa;\n";
	$output .= "}\n";
	return $output;
}
add_filter( 'avf_dynamic_css_after_vars', 'my_avf_dynamic_css_after_vars', 10, 1 );

Thanks that did work nicely!. Oddly that extra space appeared on one phone we looked at and not another after all, but in both cases it looks fine now. So, great.

I have a more general question though in terms of applying css with the advance developer options :

I have this in that Custom CSS field under developer settings: remove-space

and this css in general styling to move the div up:

@media only screen and (max-width: 767px) {
.remove-space{
margin-top: -40px !important;
}
}

which is working nicely on another place where the spacing needed a tweak. My only question is is there any issue when targeting only the mobile version in using a negative number for the top margin? If this is kosher which I think it is I can stop asking for help targeting things as we have been one at a time when I can’t figure out the right place win the code to target when the inspecting the element.

Again thank you for your excellent support and patience as always.

Tony

I’m trying out this code, but I think it changes both the mobile and desktop versions. At least, that’s what the page speed is indicating.

Hi Guenni,
i added your css and it looks very good in desktop resolution for large screen.
I added smaller images for resolutions below 989px.
The issue i’m facing is, that, when i shrink the browser width, some text goes out of the border.
Is there a workaround, so that the images should be staying allways in the same proportions and everything shrinks with same proportions, when the browser window gets reduced in width?

I also saw, that the last image has too much space above (only that one. i checked if there was some wrong settings, but i can’t find something wrong?

https://img.savvyify.com/images/2024/07/03/space-above-last-image.jpg

kind regards Jak

Hey Mike,
the numbers at the top are just deep links to slide 1, 2, 3.

No, I am just wondering that I cannot find a setting to disable the right arrow, when I am on the last slide. I don’t want the user to go from slide 3 to slide 1 by clicking the right arrow. It is an e-learning tool and it makes no sense here.

BTW we are talking about the Layerslider which is integrated in Enfold. Maybe I should ask here: https://layerslider.com/help/

Best regards, Agim

Hi Guenni,
i will do that now. Sould i keep or delete:

/**** Feld Definitionen ********/

#top .avia_textblock.img-with-caption-right .wp-caption .wp-caption-text  { grid-area: feld1 }
/*** depends on if there is a link on the image or not  ****/
#top .avia_textblock.img-with-caption-right .wp-caption > *:first-child { grid-area: feld2 }

#top .avia_textblock.img-with-caption-right .wp-caption {
  border: 1px solid #cccccc;
  width: 100% !important;
  margin: 0;
  display: grid;
  grid-auto-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "feld2 feld1";
  align-items: flex-end;
}

#top .avia_textblock.img-with-caption-right .wp-caption img {
  padding: 0 !important;
} 

#top .avia_textblock.img-with-caption-right .wp-caption .wp-caption-text  {  
  display: block ;
  color: #222222;
  font-style: normal;
  font-size: 18px;
  font-family: inherit;
  width: 100%;
  padding: 0 1em;
  text-align: left;
}

.avia_textblock.img-with-caption-right .wp-caption .wp-caption-text p {  
  margin: 0 !important;
}

/*** Abstang über dem Rahmen ******/
#top .avia_textblock.img-with-caption-right .wp-caption img {
  margin-top: 70px
}

/**** for responsive case maybe:*****/

@media only screen and (min-width: 990px) and (max-width: 1051px) {
  #top .avia_textblock.img-with-caption-right .wp-caption {
    grid-template-columns: 1fr;
    grid-template-areas: "feld2" "feld1" !important;
  }
}

for css or just add your new css?
kind regards
Jak

• This reply was modified 1 year, 8 months ago by Jak73.