Hi,
Thank you for the login, I added a new example under your example on the test page using the class model outlined above, this will give you better control.
I used different classes for the css and added it to a code block element on the page so it would be easier to test with, please check the page front and back.

.dotted-div-border {
    border: 2px dotted #c9c9c9 !important;
    border-radius: 30px;
    padding: 15px;
}
.dotted-div-border h5 .dotted-title {
	font-size: 14pt; 
	color: #808080;
}
.dotted-div-border h5,.dotted-div-border h6 {
	text-align: center;
}
.dotted-div-border .dotted-sub-title {
	font-size: 14pt; 
	color: #808080;
	text-align: center;
}
.dotted-div-border .dotted-content {
	font-size: 8pt;
}
.dotted-div-border .dotted-content a {
	font-size: 8pt;
	color: #000000;
}
.dotted-div-border .dotted-email {
	font-size: 12pt;
	color: #808080;
}
.dotted-div-border > p {
	margin: auto;
    width: 90%;
}

<h5><span class="dotted-title">Welcome to the (probably)</span></h5>
<span class="dotted-sub-title"> littlest portal in the digital universe*</span>
<img class="size-medium wp-image-1959 alignleft" src="profile-pic-2.png" alt="" width="80" height="80" />
<span class="dotted-content">I do digital for a better world.
    You can check my updates here:
    >a href<- Twitter>/a<
    >a href<- Slideshare>/a<   
</span>
<h6><span class="dotted-email"><a href>max@-----.net</a></span></h6>

Best regards,
Mike

Hi,
Thank you for the feedback, you could try removing this css:

@media only screen and (max-width: 767px){
.avia-builder-el-18 article{
margin:30px 0px!important;
}

.avia-builder-el-33 article{
margin:30px 0px!important;
}}

and see if that helps. The issue with the above css is that it is too general, avia-builder-el-18 could occur on any page or post, the same with article.
I recommend re-writing this rule to be specific, try adding the page-id to the rule as a minimum.

Best regards,
Mike

Hi,
Please try this css instead of the last code above:

#top.page-id-1066 #main > div > div > main > div > div > div:nth-child(4) > div.avia-builder-el-8 > div:nth-child(7) > table > tbody > tr > td {
    text-align: left !important;
 }
#top.page-id-1066 #main > div > div > main > div > div > div:nth-child(5) {
	z-index: 0 !important;
	position: relative !important;
}

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

Best regards,
Mike

Hi,
Sorry for the very late reply, glad to hear that you have this sorted out, I believe this could be related to you using two domains, I have not seen this elsewhere, but we will take note. Unless there is anything else we can assist with on this issue, shall we close this then?

Best regards,
Mike

Hi,
Thank you for the login, I copied your page using the Enable Avia Layout Builder Debug and tested it on my new install localhost and the icon grid worked correctly.
I checked your Quick CSS and found the cause:

#gridda .avia-icongrid li .avia-icongrid-content {
    padding: 0 3em;
}

I removed it for you, please clear your browser cache and check.

Best regards,
Mike

Hi,
Thank you for sharing your solution, the fadeTo is nicer :)
Unless there is anything else we can assist with on this issue, shall we close this then?

Best regards,
Mike

Hi,
Sorry for the very late reply, glad to hear that you were able to sort this out. In the future, if you want to attach screenshots please use an online image host and paste the links in your post. For files, most people seem to use DropBox.
We will close this now. Thank you for using Enfold.

For your information, you can take a look at Enfold documentation here
For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

Best regards,
Mike

Hi,
Sorry for the very late reply and thanks for the link to your site, as I understand your issue with the mobile menu, many menu items after “PSICOLOGIA E VISIONE DELL’UOMO” are off the screen because the menu is so long.
I see that many of your menu items are children of parent menu items, collapsing these would allow all of your mobile menu items to show.

Best regards,
Mike

Hi,
Sorry for the very late reply and thanks for the link to your site, I tested your #gridda section with the icon grid, and I noticed that it looks correct until the page finishes loading, which is when it breaks.
I found that if I block your merged avia-footer-scripts the error doesn’t occur, if you have any custom scripts please remove them and clear your browser cache and any caching plugins, and go to the theme option Enfold Theme Options > Performance > Delete old CSS and JS files and enable and then save your theme options.
If this solves the issue, then please take a closer look at your scripts, if you don’t have any custom scripts or if this doesn’t help, then try disabling Enfold Theme Options > Performance > JS & CSS file merging and compression and any caching or minifying plugins, and any server cache you can. Then start disabling plugins one at a time, clearing the cache after each one until the error stops.
If you don’t have any luck, please include an admin login in the Private Content area so I can try these steps and investigate further.

Best regards,
Mike

Hi,
Sorry for the late reply, unfortunately, the login didn’t work for me, but I did find on your /Team/ page the 5 team images, the last image has “alignright” instead of “alignleft” as the other images. I also found that your css doesn’t include the first image, the class for the second image is used twice “#attachment_1765”, you also have a rouge paragraph tag between the first and second images.
Please try this css in the WordPress > Customize > Additional CSS field, since it has the highest priority:

@media only screen and (max-width: 1024px) { 
#top.page-id-22 #wrap_all #main .post-entry-22 div#attachment_1762.wp-caption.alignleft {
		margin: auto !important;		
		width: 100px !important;		
}
#top.page-id-22 #wrap_all #main .post-entry-22 div#attachment_1765.wp-caption.alignleft {		
		margin: auto !important;
		width: 100px !important;		
}
#top.page-id-22 #wrap_all #main .post-entry-22 div#attachment_1768.wp-caption.alignleft {
		margin: auto !important;
		width: 100px !important;
}
#top.page-id-22 #wrap_all #main .post-entry-22 div#attachment_1771.wp-caption.alignleft {
		margin: auto !important;
		width: 100px !important;
}
#top.page-id-22 #wrap_all #main .post-entry-22 div#attachment_1374.wp-caption.alignright {
		margin: auto !important;
		width: 100px !important;
		float: left !important;
}
}

This css accounts for the errors above so you could try it as is, or you can use this to model your current css, but note the alignment of the last image (alignright), so if you correct the element you will also need to correct this css. I hope that makes sense.

Best regards,
Mike

Hi,
Thank you for the feedback, for your breadcrumbs on mobile I found these two css rules which I believe is added to your custom css:

@media only screen and (max-width: 767px){
.responsive #top #main {
    padding-top: 0!important;
    margin: 0;
}
}

and

@media only screen and (max-width: 989px) and (min-width: 768px){
.responsive.html_mobile_menu_tablet.html_header_top #top #main {
    padding-top: 0!important;
    margin: 0;
}
}

If you can find these and remove them it would correct your issue, but if you can’t find them you can use this css to override them, I recommend adding this css to the WordPress > Customize > Additional CSS field, as it has the highest priority.

@media only screen and (max-width: 989px) and (min-width: 768px) {
.responsive.html_mobile_menu_tablet.html_header_top #top #wrap_all #main {
    padding-top: 88px !important;
}
}

@media only screen and (max-width: 767px){
.responsive #top #wrap_all #main {
    padding-top: 88px !important;
}
}

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

Best regards,
Mike

Hi,
Sorry for the very late reply and thanks for the links, unfortunately, you can not turn a layerslider into a parallax. But I see above that you tried the full-screen slider, but you had issues.
I tried this on my localhost with your image and was able to adjust your image for a full-screen slider with the parallax effect.
For my desktop example I created an image 1520×865 to account for the parallax effect on desktop, I found to have the ink well showing I had to add 165px below the image to account for the parallax effect.
Please see the image link in Private Content area and give this a try.
I also tested this image as the parallax background of a color section with 100vh, and it worked well.

Best regards,
Mike

Hi,
Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

.mec-events-template-default dt,.mec-events-template-default dd {
    float: unset !important;
}

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

Best regards,
Mike

Hey Dave,
Sorry for the very late reply, I took a look at your other thread but it seems that your test site is down right now, do you have another page that we can see this error in action?

Best regards,
Mike

Hi,
The reason your dotted border on the div is faint is that you need to add !important; to the border color to override the default values.
border: 2px dotted #000000 !important;
I see in your screenshot your HTML structure is different than the test page we have been working on, can you update the test page or link to the new one.

Based on this screenshot I would recommend this markup:

<h5><span class="dotted-title">Title</span></h5>
<span class="dotted-sub-title">sub-title</span>
<img> (image html the same)
<span class="dotted-content">content & links</span>
<h6><span class="dotted-email">email link</span></h6>

I would also recommend moving your inline css to a css rule.

Best regards,
Mike