Ok,going back to this example – how doi address the left and right margins of the upper text in the css?

I have reinstalled the backup from 2 days ago. So really everythign should be fine. But for some strange reason, the small margins of some text boxes sidewide still remain. See here.

The text of the above boxes was aligned with the text of the bottom box. So somehow there is a broken settung? Style etc? I have reinstated the old backup with database and ftp. Everything else is fine except for that issue…

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

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

HI there,
after the tables initially performed well on Mobile and desktopview, they have now reverted back to the standard layout in desktop view. How could this happen? I have not touched the code for 2 weeks and have not looked at the page. Today suddenly the css for the Table view on desktop doesn’t take hold anymore. Is the handler not called this anymore? #top.page-id-472 .av-hriqo-df64f73a2229a5a484cc56fae9caca2e .avia-data-table

It needs it be like this:
1. no borders
2. no grey background
3. font sizes bigger, both 16px
4. font in first column is blue
5. all fonts in cells align left

I suspect that the handler name somehow changed itself? can you please check? I would not like to go through adjusting the css again from scratch since it was so much hassle to get it right…

Bets, Peter

• This reply was modified 1 year, 1 month ago by ausgesonnen.

Ok much better on mobile. However now the breakpoint on desktop is too wide. The icons get vertically aligned a bit too soon.

Thanks Mike. Much better. One last thing about this: The 3 cells could make better use of the widths of the window. There is a lot of space on the left and right. I tried to adjust the padding but it doesn’t seem to make a difference either way.

Please send CSS to space out the boxes more and reduce margins left and right.

Thank you.

Hm, Problems now:
1. in the first lines, the bottoms parts o letters are cut of, eg. the bottoms parts of g, p
2. there should be no indent for the dates.
3. best would be to have the description start on a new line. Is that possible?

Best
Peter

I will open a new ticket now.

Also, your new code you sent has destroyed the layout in the Desktop view. Aren’t you checking the code before you are sending it out? This is getting quite frustrating.
Generally I am noticing, that the answers that are coming from Ismael are often not working or he is stalling for time, saying he doesn’t understand the question.
Could somebody else please see what is going on with these tables? It should be something quite simple for you I suppose? For me unfortunately it is not which is why I opted to pay for this service. Time is running out and this issue needs to be solved asap.

thank you.

LOL – now the double dates are back Lol.

1. The same again please without the double dates.
2. the tables below are still with border. please send teh css handler to do the same to them as to the table above.

Thanks

Hey Rikard. No, unfortunately I have not found a solution. in the mobile menu, I want the top level menu items to be the same size as the sublevel menü items. Please send the css for this.

thanks you

OK thank you that worked.

Your new code has removed the double dates but the other issues are still the same.

Please send adjusted css for mobile version to:
1. remove the border from around the table
2. set the years in one line
3. the color of the year to blue
4. decrease padding

thank you.

Ok great. I need to style the table further but from inspecting the code, I really cannot work out how to add the correct names for the styles :(
Can you please help me and send CSS for the following
1. no borders
2. second column has white not no grey background
3. font sizes bigger, both 16px
4. font in first column is blue
5. all fonts in cells align left

thanks