Wow! Thank you !! That’s amazing! You’re a genius :)

Is there away to fix the width of the right cell?
And is it possible to use the blog naviagion (front and back buttons)

But theese are just wishes on top, I am more than happy with what I got :)

So my iPhone 12 has a screen width of 1170px in portrait mode so only the Desktop mode will work.

The Image I uploaded is only 1000px wide so it should fit nicely on the screen, but instead this is what I get:

Hi Mike,
No, I’m testing using my mobile not shrinking the desktop browser!
I’m sure it’s displaying ‘correctly’…it’s just not displaying sensibly. The red boxes completely overwhelm the header and slider, occupying 75% of screen estate in your image, which is silly for a couple of small messages.
I will try the duplicate grid row method, – glad to hear you confirm it should work. CSS is all very well, but I’m going to end up with loads of additional code which I don’t fully comprehend…and somewhere down the road may not even remember where in the admin I put it and what it’s fixing! The duplicate grid row approach is administratively a bit easier for me, and I can redesign the message boxes a little.
Will let you know how it goes.

regards
Hugh

.justify-text {
text-align: justify;
-webkit-hyphens: auto; /* For Safari */
-moz-hyphens: auto; /* For Firefox */
hyphens: auto; /* Standard */
}

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

.avia-icongrid-front,.avia-icongrid-flipback {
border-radius: 100%;
min-height: 300px;
min-width: 300px;
}

.av-hriqo-df64f73a2229a5a484cc56fae9caca2e table tr th {
width: 20%;
font-size: 20px;
font-weight: bold;
text-align: left;
background-color: #000000;
padding: 8px;
}

@media only screen and (max-width: 767px) {
#top .avia-icongrid.av-flex-cells.av-break-989 .av-icon-cell-item {
flex: 1 1 100%;
}
}

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

@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;
}
}

#top .av-82qhko-49fd44439e70710ba9259a5b8656603c .avia-data-table {
border: 0;
padding: 10;

}

div .avia-table {
background: transparent;

}

#top.page-id-472 #main .main_color .avia-data-table * {
border: none;
background-color: #fff;
font-size: 18px;
text-align: left;
}

#top.page-id-472 .main_color .avia-data-table.avia_pricing_minimal th {
color: #666666;
width: 15%;
}

#top.page-id-472 .av-hriqo-df64f73a2229a5a484cc56fae9caca2e .avia-data-table td:before {
display: none;
}

.av-hriqo-df64f73a2229a5a484cc56fae9caca2e table tr th {
width: 20%;
font-size: 20px;
font-weight: bold;
text-align: left;
background-color: #000000;
padding: 8px;
}

.avia-form-success {
text-align: center;
border-style: solid;
border-width: 0px;
padding: 20px 15px;
line-height: 1.4em;
border-radius: 2px;
clear: both;
Font-size: 14px;
font-weight: normal;
text-decoration: none,
}

.page-id-1331 input, .page-id-1331 textarea {
border-color: #009BDD !important;
}

.input_checkbox_label {
color: #6F6571 !important;
}

.responsive #top #av_section_4 .container {
width: 100%;
}

@media only screen and (max-width: 767px) {
#top #av_section_4 .avia-icongrid .av-icon-cell-item .avia-icongrid-flipback {
padding: 0 3em;
}
}

@media only screen and (max-width: 767px) {
#top .avia-icongrid.av-flex-cells.av-break-989 .av-icon-cell-item {
flex: 1 1 100%;
}

.avia-icongrid-flipbox .av-icon-cell-item .avia-icongrid-front .avia-icongrid-inner, .avia-icongrid-flipbox .av-icon-cell-item .avia-icongrid-flipback .avia-icongrid-inner {
padding: 0 3em;
}

.all_colors h3 {

line-height: 1.3; /* Adjust the value to increase or decrease spacing */
}

.keinspace span {
display: block; /* Ensure the span is treated as a block element */
margin-top: 0px; /* Adjust margin-top to reduce space */
font-size: 0.7em; /* Adjust the font size smaller */
color: #6F6571; /* Change the text color to grey */

}

.avia-cookie-consent {
width: 100%;
position: fixed;
background-color: #009BDD;
z-index: 999;
color: rgba(255,255,255,0.9);
padding: 1.1em;
text-align: center;
opacity: 1;
visibility: visible;
transition: all 0.3s ease-in-out;
overflow: hidden;

}

.avia-cookie-consent-button,
.avia-cookie-info-btn,
.avia-cookie-hide-notification,
.avia-button {
background-color: white !important;
color: black !important;

}

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

/* Add your Mobile Styles here */
#top #header .av-logo-container .av-main-nav>li.av-burger-menu-main {
display: block;
}
}

@media only screen and (min-width: 768px) {

/* Add your Mobile Styles here */
#top #header .av-logo-container .av-main-nav>li.av-burger-menu-main {
display: none;
}
}

#avia-menu .menu-item {
display: none;
}
.av-burger-menu-main.menu-item-avia-special {
display: block;
}
}

.container_wrap {
border-top-width: 0;
}

#scroll-top-link {
display: none;
}

.avia_iconbox_title {
font-size: 18px;
color: #6F6571;
}

.avia_iconbox_title:hover {
color: #009BDD; /* Set the font color on hover to blue */
}

#header_main .av-logo-container {
margin-bottom: -14px;
}

Thanks for the answer, Mike. Is there any other component (instead of layerslider7) that I can use for having a full width video in a page with muted autoplay working even on safari ios?

Ok, they are loading now after I changed the order of the styles. I put the ones that were not loading at the top of the customizer. Now fine.
Except there is a new problem. Some of the boxes lost their margins/padding. eg. on the page über mich, the table with the dates was in the same line as the text above. NOw it is squashed to the side.
It happened after I pasted this morning a new style you sent for the flip boxes on the front page. After that the styles went crazy.

Which one is the style that affects the margins of the text pages on all the pages?

Best
Peter

Thank you for your reply.
Please check the link I sent in this message. Could you review it in both mobile and desktop views to see how the image of the cell in grid view appears? It seems to be cropped in the mobile view.

Hi,
This code is working for sections where I have centered headings i.e., Heading Style = (Elegant Style Centered), thank you. But the left aligned headings (Heading Style = Default Style) still have a horizontal line to the right. I don’t want any lines in headings. Could you suggest css code for removing the line for the Default style heading as well?

I tried the following css for Default style Headings – adapted from a related support ticket RE: Default style Special heading but the code did not work. – see LINK
.acme-av-special-heading .special-heading-border
{
display:none !important;
}