Our Work - Topic Title has wrong format

Hello Support,

I have the following problem with the “Our Work” area on the frontpage. In Elementor preview it look ok:


but in the frontpage it looks like this:

How can I fix this?
Many thanks
Roman

Hi Roman,

Seems likely your page is missing some styles.

Can you share a link to your page, so I can inspect it directy and get the solution to suggest?

Regards,
Kharis
aThemes Support

Of course: solunity services GmbH – the service company (solunity-services.com)

Thanks for checking.

Roman

We have changed the URL. Could you please check, we want to set it live.
New URL: www.solunity-services.com

Hi,

Thank you for sharing the link.

As checked, it appears the below custom CSS code causes this trouble.

    .our_work .project-title span {
        position: absolute;
        bottom: 0;
        background-color: #fff;
        width: 89%;
        padding: 18px 25px;
        text-align: left;
        margin: 0 0 20px 20px;
    }

I can confirm that it is not part of the theme and can be found in Additional CSS under the Appearance > Customize menu.

Did you/your developer add it? What is the purpose of it? Perhaps I can make a little revisions.

Regards,
Kharis
aThemes Support

Hello Kharis,

just for clarification, we did not add any custom CSS apart from the topics we have discussed here.
Maybe the installation brought some more CSS? We started with Sydney and then changed to Sydney Pro. With using Sydney Pro, how should the Custom CSS look like by default?

Many thank for clarification.

Best regards

Roman

Hi Roman,

The custom CSS is empty by default.

If you can get that code in Additional CSS, please replace it to

    .our_work .project-title {
      background-color: #fff;
    }

Regards,
Kharis
aThemes Support

Hello Kharis,

please see below the complete code of the custom CSS. Everything above /* Additional Changes… is not added by us. Can you please confirm that the CSS code is from Sydney Pro delivery. If the code is not from the delivery I would remove it.
Could you also name me the location of the custom css file so I could compare the sydney_pro.zip content with my installation.

h1, h2, h3, h4, h5, h6 {
color: #585858;
}

/* Header edits */
#mainnav .current-menu-item {
	border-bottom: 2px solid #9ac01d;
}

#mainnav li {
padding: 0 2px;
margin: 0 12px;
}

.site-header {
border-bottom: 1px solid rgba(255,255,255,0.1);
}

/* Skills edits */

.skills_percentage_fix .elementor-progress-wrapper {
	overflow: visible !important;
}

.skills_percentage_fix .elementor-progress-percentage {
	margin-top: -20px;
	padding-right: 0;
}

/* Icons edits */

.center_icons_fix .elementor-icon-box-wrapper {
align-items: center !important;
}

.center_icons_fix .elementor-icon-box-title {
	line-height: 60px;
margin-bottom: 15px !important;
}

/* Our work edits */

.our_work li a {
	color: #585858;
padding: 0 2px;
margin: 0 8px;
}

.our_work li a:hover, .our_work .active {
	color: #585858;
		border-bottom: 2px solid #9ac01d;
}

.our_work li a {
		border-bottom: 2px solid transparent;
}

.our_work li a.active {
		color: #585858;
}

.our_work li {
	background-color: transparent;
}

.our_work .roll-project.fullwidth .project-item {
width: 30%;
margin: 15px;
}

.our_work .project-title span {
position: absolute;
bottom: 0;
background-color: #fff;
width: 89%;
padding: 18px 25px;
text-align: left;
margin: 0 0 20px 20px;
}

.our_work .project-pop {
	background-color: transparent !important;
}

/* Testimonials */
.test_add_quote .fa {
display: block;
text-align: center;
font-size: 4em;
color: rgba(255,255,255,0.3) !important;
	margin-bottom: 30px;
}

.test_add_quote .avatar {
width: 80px;
border: 5px solid rgba(255,255,255,0.7);
}

.test_add_quote .testimonial-position:before {
	content: '-';
	margin: 0 5px;
}

.test_add_quote .testimonial-position {
	display: inline-block !important;
text-align: left;
	width: 51%;
}

.test_add_quote .testimonial-name {
text-align: right;
float: left;
width: 49%;
}

.test_add_quote .owl-theme .owl-controls .owl-page span {
background-color: rgba(255,255,255,0.3);
	border-color: transparent;
}

.test_add_quote .owl-theme .owl-controls .owl-page.active span {
background-color: #fff;
width: 40px;
	border-radius: 4px;
}

/* Team edits */
.team_hover_edits .team-pop .name, .team_hover_edits .team-pop .pos {
	display: none;
}

.team_hover_edits .team-pop .name, .team_hover_edits .team-pop .team-info {
top: 80% !important;
}

.team_hover_edits .team-pop .name, .team_hover_edits .team-pop {
	background-color: transparent !important;
}

.team_hover_edits .team-social li a {
color: #000;
margin-left: 10px;
height: 40px;
width: 40px;
border: none;
background-color: #fff;
border-radius: 0;
	line-height: 42px;
}

.team_hover_edits .team-pop .team-social li:hover a {
	color: #fff !important;
background-color: #9ac01d;
}

.team_hover_edits .avatar {
	box-shadow: 0px 11px 40px 0px rgba(79,118,157,0.1);
}

.team_hover_edits .team-item {
	padding: 0 25px 0 0 !important;
}

/* latest_news */
.latest_news .roll-button {	border: none !important;
	border-color: transparent !important;
}

/* footer */
.footer-widgets {
padding: 72px 0 62px;
}

#sidebar-footer {
	font-size: 14px;
}

#media_image-3 {
	margin-bottom: 47px;
}

#text-3 {
	font-size: 14px;
	padding: 0;
}

#sidebar-footer .col-md-3:first-child {
width: 338px;
padding: 0;
margin-right: 90px;
}

#sidebar-footer .col-md-3 {
	width: 18%;
}

#sidebar-footer .widget-title {
color: #fff;
text-transform: none;
font-size: 20px;
margin: 0 0 17px 0;
}

#sidebar-footer .widget-title:after {
content: '';
display: block;
width: 50px;
height: 3px;
background-color: #9ac01d;
margin-top: 17px;
}

#sidebar-footer .col-md-3:last-child {
width: 300px;
}

/* Blog edits */
#secondary #recent-posts-2 ul li {
	padding: 20px 0;
border-bottom: 1px solid rgba(0,0,0,0.1);
}

#secondary #recent-posts-2 ul li:last-child {
border-bottom: none;
}

#secondary #recent-posts-2 ul li a {
	font-size: 16px;
line-height: 24px;
color: #585858;
display: block;
margin-bottom: 10px;
}

#secondary #recent-posts-2 ul li span {
color: #878787;
font-size: 13px;
}

#secondary #categories-2 ul li, #secondary #archives-2 ul li {
	padding: 0;
font-size: 16px;
line-height: 40px;
color: #878787;
font-weight: bold;
}

#secondary .tagcloud a {
	font-size: 13px !important;
background-color: #F2F2F2;
padding: 7px 16px;
margin: 2px;
	display: inline-block;
	word-break: keep-all;
}

input[type="text"], input[type="email"] {
color: #878787;
background-color: #fff;
border: 1px solid rgba(0,0,0,0.1);
height: 42px;
padding: 13px 20px;
}

input[type="submit"] {
	width: 100%;
}

/* Contact Us*/

#contact_us_form input::placeholder, textarea::placeholder {
	color: #585858;
}

#contact_three_fields {
background-color: #FAFAFA;
border: 1px solid #e5e5e5;
height: 50px;
padding: 15px 27px;
		margin: 0 0 30px 0;
	width: 31.5%;
}

span.YourEmail > input {
	margin: 0 31px 30px 31px !important;
}

#contact_message {
	color: #585858;
background-color: #FAFAFA;
border: 1px solid #e5e5e5;
padding: 15px 27px;
margin: 0 0 30px 0;
	width: 100%;
}

#contact_submit {
	width: auto;
	padding: 15px 33px;
	font-size: 14px;
}

#contact_us_form {
	text-align: center;
}

/* Mobile edits */

@media (max-width: 768px) {
	.our_work .roll-project.fullwidth .project-item {		
		width: 45.5%;
}
	
#sidebar-footer .col-md-3:first-child {
width: 45%;
margin-right: 70px;
float: left;
}
	
#sidebar-footer .col-md-3 {
width: 45%;
float: left;
}
	
	#contact_three_fields, #contact_message {
margin: 0 30px 30px;
		width: 90%;
}
}

@media (max-width: 479px) {
.our_work .roll-project.fullwidth .project-item {		
		width: 93% !important;
}
	
.team_hover_edits .team-item {
padding: 0 !important;
}
	
#sidebar-footer .col-md-3:first-child {
width: 100%;
margin-right: 0;
}
	
#sidebar-footer .col-md-3 {
width: 100%;
}
	
#sidebar-footer .col-md-3:last-child {
width: 100%;
}
	
	#contact_three_fields, #contact_message {
		width: 85%;
}
	
.contact_iconed_list .elementor-icon-box-icon {
float: left;
margin-right: 15px !important;
}
	
}

/* Additional Changes
 * Roman Becker, 02/2020
 * - previous css version
 *   not needed anymore
 *   @media only screen and
 *   (min-width: 992px) {
 *   .header-slider */
.slide-inner {
  max-width: 50%;
  margin-left: 50%;
}

.footer-widgets .elementor-button.elementor-size-lg {
  font-size: 18px;
  padding: 20px 40px;
  border-radius: 5px;
}


/* Footer Additional */
/* Roman, 29.01.2021 */
.footer-widgets a.elementor-button-link {
  background-color: #9ac01d;
}

.footer-widgets a.elementor-button-link .elementor-button-text {
  color: #fff;
}

.footer-widgets a.elementor-button-link:hover {
	    border: 1px solid #9ac01d;
			border-radius: 3px;	
  background-color: transparent;
}

.footer-widgets a.elementor-button-link:hover .elementor-button-text {
  color: #9ac01d;
}

Many thanks

Roman

@kharisblank any news on the topic?

Many thanks

Roman

Hi Roman,

Thank you for sharing your custom CSS. I found these lines, can you try removing it?

    .our_work .project-title span {
        position: absolute;
        bottom: 0;
        background-color: #fff;
        width: 89%;
        padding: 18px 25px;
        text-align: left;
        margin: 0 0 20px 20px;
    }

Regards,
Kharis
aThemes Support

Hello Kharis,

it is now a little better but not comparable to Sydney Pro behaviour in the demo site:
Demo behaviour on mouse over:

Our site on mouse over:

Please give advice how to get back the background effect.

Many thanks

Best regards

Roman

Hello Kharis,

I have solve setting the background color myself.
Thanks

Best regards
Roman

Hi Roman,

I can’t inspect the trouble directly on your page since the project part was moved. Can you repicate it to a separate staging site and link it here, so I can inspect it?

Regards,
Kharis
aThemes Support