Docs

[Marcelo]

Hi, for some reason the layout, CSS on the front page part of my website has changed.

As you can see in the image attached, for some reason the 2 numbers that should be at the top of the image disappeared and number 3 is in the wrong place. It happened after the upgrade I suppose, and I can’t see what its not working. The numbers were created in CSS.

The codes are similar, only changing the color for each one of them.

display: block; font-weight: 700; font-size:19px; width:40px; padding: 0 0 2px; text-align: center; border: 3px solid #dac568; background: #fff; border-radius: 35px; position: absolute; top: -18px; left: 50%; margin-left: -17.5px; color:#E3C062;

Can you please give me a hand with this problem.

Thank you so much in advance!

[Marcelo]

This reply has been marked as private.

[Rad]

Hi there,

Thanks for writing in.

Ah, thanks for the detailed information about the issue. Got it 🙂

But, would you mind providing your site’s URL as well?

Thanks!

[Marcelo]

Sorry about that! The website´s URL is:http://atracaodeclientes.com.br/

Thank you in advance!

[Rue Nel]

Hello There,

Thanks for providing the url of your site. Upon inspection, you have inserted an invalid custom css which affect the whole code. Please have your code updated and use this instead:

/*
No need for style tags here;
simply get started by writing
CSS! Watch as your changes
are reflected live in the
preview area. Have fun!
*/

@import url(http://fonts.googleapis.com/css?family=ABeeZee:400,400italic);
@media (min-width: 768px) {
  .x-topbar .p-info {
    overflow: hidden;
    float: none;
    margin-top: 7px;
    height:13px;
  }

  .x-prompt {
    border: 3px solid #F2DC7A; /*where 5px is the thickness*/
    background-color: white; /*where .5 is the transparency value*/
    font-family: "Lato", sans-serif; /*where Lato is the name of your custom font*/
    color: #2B383A;
    border-radius: 10px;
  }

  .home .widget ul, 
  .home .widget ol {
    overflow: hidden;
    margin-left: 0;
    border: 1px solid #ddd;
    border: 1px solid rgba(0, 0, 0, 0.16);
    list-style: none;
    border-radius: 6px;
    background-color: white;
    box-shadow: 0 1px 1px rgba(36, 36, 36, 0.95);
  }

  .home a.smart-post-list-title, 
  a.smart-post-list-title:active, 
  a.smart-post-list-title:visited {
    color: #b10000;
    font-size: 20px;
  }

  .home .smart-post-list-main .image-left-in-excerpt {
    float: left;
    padding-right: 15px;
  }
}

Please let us know how it goes.

[Marcelo]

Hi, thank you for your help. Unfortunately, the code didn’t work. It changes the button colors and the numbers didn’t move. The CSS code I’m using is below:

 .x-topbar .p-info {
      overflow: hidden;
      float: none;
      margin-top: 7px;
			height:13px;
    
   }

   .x-topbar .p-info 
   .right-content {
      float: right;
      font-size: 11px;
      margin-top: 0px;
   }
  
	.x-topbar .x-social-global {
    float:right!important;
    padding-bottom: 7px;
    padding-top: 0px;
    margin-top: 5px;
    height: 30px;
    display:none;
	}
  
  .x-topbar {
  position: relative;
  min-height: 26px;
  border-bottom: 1px solid #f2f2f2;
  background-color: #fff;
  z-index: 1031;
}
  .x-navbar {
  position: relative;
  overflow: visible;
  background-color: #FFFFFF;
  font-size: 14px;
  z-index: 1030;
}
 
.p-info {
float:right !important;
 font-size: 15px;
}

.custom-list li {
  line-height: 18px;
  padding-bottom: 7px;
}

 .x-btn, .button   {

  color: #ffffff;
  border-color: #BEAB54;
  background-color: #DAC568;
  text-shadow: none);
  box-shadow: none;
  
  
	}
  
  .x-btn:hover {
  color: #ffffff;
  border-color: #BEAB54;
  background-color: #f8df6e;
  text-shadow: none);
  box-shadow: none;
	}
  

.gray-btn {
  color: #333333;
  background-color:#DBDBDB;
  border-color: #333333;
  box-shadow: none;
  text-shadow: none;
}
.gray-btn:hover {
	color: #333333;
	border-color: #333333;
	background-color:  #f3f3f3;
	text-shadow: none;
	box-shadow: none;

}

.red-btn {
  color: #ffffff;
  background-color:#b10000;
  border-color: #a9110d;
  box-shadow: none;
  text-shadow: none;
}
.red-btn:hover {
	color: #ffffff;
	border-color: #a9110d;
	background-color:  #e01b16;
	text-shadow: none;
	box-shadow: none;

}

 .entry-title {
    margin: 0;
    font-size: 200%;
    line-height: 1.05;
}

.entry-wrap {
    display: block;
    padding: 15px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0.15em 0.35em 0 rgba(0,0,0,0.135);
}

.p-meta {
    margin: 8px 0 8px;
    font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 85.7%;
    line-height: 1.5;
    text-transform: uppercase;
}

.widget ul li, .widget ol li {
    border-bottom: 1px solid #C4C4C4;
    border-bottom: 1px solid rgb(194, 194, 194);
    padding: 0.65em 0.85em;
    line-height: 1.5;
    box-shadow: 0 1px 1px rgba(255,255,255,0.95);
    -webkit-transition: background-color 0.3s ease;
    transition: background-color 0.3s ease;
}

.post-button {
    display: block;
    margin: 0 auto;
    width: 250px;
    text-align:center;
    border-width: 2px !important;
    border-radius: 0.525em !important;
   padding:10px;
 font-size: 15px;

}
.post-button:hover {
  background-color: #DAC568 !important;
}

.category .x-header-landmark {
  display: none !important;
}

.blog .x-header-landmark {
    font-size:75%;
}

.x-recent-posts-date {
display: none !important;
}

a.entry-thumb:hover img {
	opacity: 1;
	filter: alpha(opacity=100);
	zoom: 1;
}

/* .single-post .has-post-thumbnail .entry-featured {
	display: none;
}
*/

.entry-thumb:before {
	background-color: transparent !important;
	content: "";
}

.x-comments-area{
    font-size:120%;
    padding:0;
    margin:20px 0 0 15px;
    color: #b10000;
    line-height:28px;
}

.p-meta span:nth-child(2) {
  display:none;
}
.smart-post-list > ul {
    float: none;
}
._form-label{font-size:16px!important;}

._form-title {
    font-size: 27px!important;
    line-height: 28px!important;
    font-weight: 600!important;
    margin-bottom: 20px!important;
		text-align:center!important;}

._form ._submit {
    width: 100%!important;
    cursor: pointer!important;
    font-family: arial, sans-serif !important;
    font-size: 19px!important;
    text-align: center;
    font-weight: 800!important;
box-shadow: none!important;}

Can you please let me know what to change?

Many thanks!

[Paul R]

Hi Marcelo,

To fix the number position, you can add this under Custom > CSS in the Customizer.

.home #x-section-2 .x-column.x-sm {
     position:relative;
}

Hope that helps.

[Marcelo]

Hi there,

The code worked BRILLIANTLY!!! Thank you so much for your time and attention!

Have a great week 🙂

[Thai]

Glad we were able to help 🙂

If you need anything else please let us know.

[Marcelo]

Hi there,

For some reason after updating the theme, the numbers disappeared again. It’s back to the same place so the problem is back again.

Can you please give me a hand on this issue.

Many thanks!

[Christopher]

Hi there,

Please update the style of first raw content element to :

<div class="x-raw-content" style="display: block;font-weight: 700;font-size: 19px;width: 40px;padding: 0 0 2px;text-align: center;border: 3px solid #dac568;background: #fff;border-radius: 35px;position: absolute;top: -18px;left: 14%;margin-left: -17.5px;margin-bottom:0;color:#E3C062;">1</div>

The second one :

<div class="x-raw-content" style="color:#b7b7b7;display:block;font-weight:700;font-size:19px;width:40px;padding:0 0 2px;text-align: center;border: 3px solid #b7b7b7;background: #fff;border-radius: 35px;position: absolute;top: -18px;left: 47%;margin-left: -17.5px;margin-bottom:0;">2</div>

And the third one :

<div class="x-raw-content" style="color:#b10000;display:block;font-weight:700;font-size:19px;width:40px;padding:0 0 2px;text-align: center;border: 3px solid #b10000;background: #fff;border-radius: 35px;position: absolute;top: -18px;left: 80%;margin-left: -17.5px;margin-bottom:0;">3</div>

Hope it helps.

[Marcelo]

Thank you Christopher. It’s back to normal now! Have a great day!!!

[Rahul]

You’re most welcome Marcelo!

If you have anything else, let us know. We’d be happy to assist you with everything.

Thanks!

[Author]

Posts