Hey Blaise,

Thank you for the inquiry.

There have been a few changes in the post meta info and the blog post elements, which might have caused the layout to change. To fix this, you can add the following css code to adjust the layout of the post meta info.

#top .av-blog-meta-category-disabled .minor-meta.blog-categories, #top .av-blog-meta-category-disabled .text-sep-cat, #top .av-blog-meta-category-disabled .minor-meta.blog-categories, #top .av-blog-meta-category-disabled .text-sep-source {
  display: none;
}

#top .fullsize .template-blog .post-meta-infos .author {
  display: block;
  font-weight: 600;
}

Best regards,
Ismael

Hey Diana,

Thank you for the inquiry.

Please add this css code to decrease the padding of the slider caption container to create more space and adjust the style of the slider buttons on mobile view.

@media only screen and (max-width: 767px) {

  /* Add your Mobile Styles here */

  #top #wrap_all .av-kvs50u-67fae942c84a74078cfcead2fbe75fa9 .avia-slideshow-button {
    width: 100%;
    margin-top: 10px;
  }

  #top #wrap_all .av-kvs50u-67fae942c84a74078cfcead2fbe75fa9__0 .container.caption_container .slideshow_align_caption {
    padding-top: 50px !important;
    vertical-align: top;
  }
}

Best regards,
Ismael

Hi,

Thank you for the screenshot.

Is the issue only visible on mobile view? If so, then you can try this css code to hide the label when the input field is active.

@media only screen and (max-width: 767px) {

  /* Add your Mobile Styles here */
  .wc-block-components-form .wc-block-components-text-input.is-active label,
  .wc-block-components-text-input.is-active label {
    opacity: 0;
  }
}

If the issue is also happening on desktop view, remove the css media query.

  .wc-block-components-form .wc-block-components-text-input.is-active label,
  .wc-block-components-text-input.is-active label {
    opacity: 0;
  }

Best regards,
Ismael

Hey dreamreader,

Thank you for the inquiry.

Did you set the Header visibility and transparency settings to Transparent & Glassy Header? If you did, then you can use this css code to adjust the transparency of the header background.

#top .av_header_glassy.av_header_transparency .header_bg {
    opacity: 0.5;
}

Default opacity value is 0.1.

Best regards,
Ismael

Hey bcndisseny,

Thank you for the inquiry.

You can add this css code to adjust the default padding of the cell or column and create more space for the contact form on mobile view.

@media only screen and (max-width: 767px) {

  /* Add your Mobile Styles here */
  .responsive #top #wrap_all .flex_cell.av-c9mynt-bafa8a24bf3e6e0c489a0aa61dc412d0 {
    padding: 20px !important;
  }
}

Best regards,
Ismael

Hi,
I tried to recreate the post that you linked to, so I created a test page with two links:

the first link opens a Classic Editor post in a new tab, the second opens the same post in a lightbox, in order for the link to work this must be added to the end of the post url:
?iframe=true&modal

Then I added two snippets in my WP Code plugin, the first is a PHP snippet

function add_modal_qs(){	
	if(isset($_GET['modal'])) {
		global $avia_config;
		if(isset($avia_config)) {
			$avia_config['template'] = 'blank';
		}
	}
}
add_action('init', 'add_modal_qs');

the second is a CSS snippet

#top.blank .title_container,#top.blank #main .sidebar{display:none;}
#top.blank .container .av-content-small.units {width: 100%;}
#top.blank .container .content {border: none;}
#top.blank #main .sidebar {border: none;}

The PHP snippet opens the post in a lightbox with no header or footer, the CSS snippet hides the titlebar and the sidebar and makes the post content full width.
So the first link, with the normal url, opens the post in a new tab with everything showing:

the second link with ?iframe=true&modal added to the url open a lightbox with only the content showing:

Best regards,
Mike

Hey ausgesonnen,
This seems to ba a duplicate thread, I offered a solution in your other thread, please review.

Best regards,
Mike

Hey northorie,
Try starting with the theme options to have the cookie bar at the bottom of the page, and then add this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top .avia-cookie-consent.avia-cookiemessage-bottom {
	bottom: unset;
	left: unset;
	margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: rgba(0,0,0,0.3);
}
#top .avia-cookie-consent .avia-cookie-consent-button {
	display: block;
    width: 60%;
    margin: 10px auto;
}
#top .avia-cookie-consent p {
	 display: block;
	 padding-bottom: 20px;
}
#top .avia-cookie-consent-button {
	 border-radius: 50px;
}
@media only screen and (max-width: 767px) { 
	#top .avia-cookie-consent.avia-cookiemessage-bottom {
	width: 80%;
	}
}
@media only screen and (min-width: 768px) { 
	#top .avia-cookie-consent.avia-cookiemessage-bottom {
	width: 25%;
	}
}

the desktop results:

tablet:

mobile:

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,

Great, I’m glad to hear that you found a solution, and thanks for sharing. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hey rqn,
If you want to hide the prev / next post navigation and add a new blog post navigation to the bottom of the posts, above the share buttons, try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

add_filter( 'the_content', 'prev_next_post_nav' );
function prev_next_post_nav( $content ) {
	if ( is_singular('post') ) {
	$content .= '<div style="clear:both;"></div>';
	$content .= '<div class="prev-next-nav-container">';
	$content .= '<div class="prev-nav">';
	$content .= get_previous_post_link();
	$content .= '</div>';
	$content .= '<div class="next-nav">';
	$content .= get_next_post_link();
	$content .= '</div>';
	$content .= '</div>';
	return $content;
	}
	else {
		return $content;
	  }
}

Then add this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

.prev-next-nav-container {
	width: 100%;
	height: 70px;
    padding-top: 20px;
    padding-bottom: 10px;
}
.prev-next-nav-container .prev-nav {
	display: inline-block;
	float: left;
    border-style: solid;
    border-width: 2px;
    border-radius: 0px;
    text-align: center;
    padding: 5px;
    text-decoration: none;
}
.prev-next-nav-container .next-nav {
	display: inline-block;
	float: right;
    border-style: solid;
    border-width: 2px;
    border-radius: 0px;
    text-align: center;
    padding: 5px;
    text-decoration: none;
}
.prev-next-nav-container .prev-nav:hover,
.prev-next-nav-container .next-nav:hover {
	background-color: rgba(0,0,0,.2);
	color: #fff;
}
.prev-next-nav-container .prev-nav:hover a,
.prev-next-nav-container .next-nav:hover a {
	color: #fff;
}
.prev-next-nav-container .prev-nav a,
.prev-next-nav-container .next-nav a {
	display: inline-block;
}
.prev-next-nav-container .prev-nav:empty,
.prev-next-nav-container .next-nav:empty,
.single-post .avia-post-nav.avia-post-prev,
.single-post .avia-post-nav.avia-post-next {
  display: none;
}

This will make post navigation buttons like this:

The buttons only have a light styling, you can adjust to suit.
On Advanced Layout Builder posts they will show at the bottom of the post page:

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.

Best regards,
Mike

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

#top .main_color .avia-data-table.avia_pricing_minimal.not-accepted th {
background-color: red; color: white; text-align: left;
}

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,

Great, I’m glad to hear that you found a solution :-)

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 we 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

Hey designmek,

Please try the following in Quick CSS under Enfold->General Styling:

.wc-block-components-combobox .wc-block-components-combobox-control label.components-base-control__label {
  top: -27px;
}

Best regards,
Rikard

Hi,

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

Best regards,
Rikard

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

@media only screen and (max-width: 1190px) {
#top .avia-icongrid.av-flex-cells.av-break-989 .av-icon-cell-item {
    flex: 1 1 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.

Best regards,
Mike

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

@media only screen and (max-width: 767px) {
.responsive #top.page-id-472 .avia-data-table.avia_pricing_minimal tr {
    padding-bottom: 20px;
}
}

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,
Ok, please remove the last snippet and try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field instead:

@media only screen and (max-width: 767px) {
.responsive #top.page-id-472 .avia_responsive_table .avia-data-table tr:first-child th {
	display: block;
}
.responsive #top.page-id-472 div .avia_responsive_table .avia-data-table td, .responsive #top.page-id-472 div .avia_responsive_table .avia-data-table th {
	padding: 0;
}
}

This is the expected results:

Best regards,
Mike

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

.page-id-214219 #header_main .container, 
.page-id-214219 .main_menu ul:first-child>li a,
.page-id-214219 .main_menu ul:first-child>li {
    height: 40px;
    line-height: 40px;
}
.page-id-214219 li.dropdown_ul_available:not(#menu-item-5472)::after {
    content: "▼";
    color: #210e23;
    position: absolute;
    top: -4px;
    left: -3px;
    font-weight: bold;
}

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 northorie,
This seems to be a duplicate thread, I answered your other thread, please review.

Best regards,
Mike