Archived topic
Theme Bold justify tetx with blocks
12 replies · Started by rafel jesus on February 6, 2020
Hi there.
I build a website and I use Bold theme and when I created a page with text but the text isn't justified.
In the CSS of the theme, there isn't anything.
In this website, I work with Elementor and Blocks for simple pages.
What can I do?
Thanks
Hi there,
Which page are you referring to?
Let me know :)
Hi Leo
I'm sorry, it was a draf is this.
https://proves.ccfoto.cat/bold/avis-legal/
Thanks
So you want all the paragraph to be justified?
If so try this CSS:
.entry-content p {
text-align: justify;
}Adding CSS: https://docs.generatepress.com/article/adding-css/
Let me know if this helps :)
Hi Leo
I put in child theme in style.ccs and isn't work also I put in additional CSS in theme options and the same
Thanks
Hi Leo
In additional CSS I have this code
/* GeneratePress Site CSS */ /* Typography styling */
/* Text highlighter on Underline Text Decoration on Elementor Headings and anchor links */
u {
text-decoration: none;
position: relative;
z-index: 2;
font-style: italic;
}
u:before {
position: absolute;
content: '';
bottom: 5px;
left: 0;
width: 100%;
height: 12px;
background-color: rgba(0, 158, 226, 0.3);
z-index: -1;
}
.text-highlighter .elementor-heading-title,
a.text-highlighter {
display: inline;
background-color: #22222f;
color: #fff;
padding: 0.2em 0.5em;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
/*--- WP Show Posts ---*/
a.wp-show-posts-read-more,
a.wp-show-posts-read-more:hover {
padding: 0;
border: 0;
}
/*--- Primary Navigation - Mega Menu ---*/
@media (min-width: 769px) {
nav .main-nav .mega-menu {
position: static;
}
/* nav .main-nav, .inside-navigation {
position: static;
}*/
nav .main-nav .mega-menu>ul {
position: absolute;
width: 100%;
left: 0 !important;
padding: 20px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
nav .main-nav .mega-menu>ul>li>a {
font-weight: bold;
}
nav .main-nav .mega-menu>ul>li {
display: inline-block;
width: 25%;
vertical-align: top;
border-right: 1px solid;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
nav .main-nav .mega-menu>ul>li:last-child {
border-right: 0;
}
nav .main-nav .mega-menu.mega-menu-col-2>ul>li {
width: 50%;
}
nav .main-nav .mega-menu.mega-menu-col-3>ul>li {
width: 33.3333%;
}
nav .main-nav .mega-menu.mega-menu-col-5>ul>li {
width: 20%;
}
nav .main-nav .mega-menu>ul>li:hover>a,
nav .main-nav .mega-menu>ul>li:focus>a,
nav .main-nav .mega-menu>ul>li[class*="current-"]>a,
nav .main-nav .mega-menu ul ul {
background-color: transparent !important;
color: inherit;
}
nav .main-nav .mega-menu ul .sub-menu {
position: static;
display: block;
opacity: 1;
visibility: visible;
width: 100%;
-webkit-box-shadow: 0 0 0;
box-shadow: 0 0 0;
left: 0;
height: auto;
}
nav .main-nav .mega-menu ul.toggled-on .sub-menu {
pointer-events: auto;
}
nav .main-nav .mega-menu .sub-menu .menu-item-has-children .dropdown-menu-toggle {
display: none;
}
.header-wrap+#page {
-webkit-transition: all 0.3s;
transition: all 0.3s;
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
/*--- Blog Page ---*/
/* Custom Blog Hero */
.custom-blog-hero {
background-color: #009ee2;
/* Change background color */
position: relative;
margin-bottom: 150px;
padding: 0 20px;
}
.custom-blog-hero-image {
mix-blend-mode: luminosity;
-webkit-filter: grayscale(100%);
filter: greyscale:;
opacity: 0.2;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center center
}
.custom-blog-hero .grid-container {
padding-top: 300px;
padding-bottom: 150px;
color: #ffffff;
/* Change text color */
z-index: 1;
position: relative;
opacity: 1 !important;
}
/* Set H2 size and font on entry title on archives */
.generate-columns h2 {
font-family: inherit;
font-size: 24px;
font-weight: 500;
}
/*-- Single Post --*/
/* Author Box */
.author-box {
font-size: 0.8em;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-bottom: 60px;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
.author-box .avatar {
width: 50px;
margin-right: 20px;
}
h5.author-title {
margin-bottom: 0.5em;
}
/* Single Post Custom hero */
.hero-grid {
padding: 0;
}
.hero-column:nth-child(1) {
padding: 20px;
}
@media (min-width: 769px) {
.hero-grid {
display: grid;
grid-template-columns: 29% 21% 50%;
padding: 0;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.hero-grid:before {
display: none;
}
.hero-column:nth-child(1) {
grid-column: 1 / 3;
grid-row: 1;
padding: 30px;
background-color: #009ee2;
color: #fff;
}
.hero-column:nth-child(2) {
grid-column: 2 / -1;
grid-row: 1;
z-index: -1;
}
.custom-hero {
padding-top: 30px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
}
/*--- Elementor Custom styling */
/* Remove Shadow from buttons when not hovered */
.no-hover-shadow .elementor-button:not(:hover) {
-webkit-box-shadow: 0px 7px 10px -6px rgba(0, 0, 0, 0) !important;
box-shadow: 0px 7px 10px -6px rgba(0, 0, 0, 0) !important;
}
/* Reduce distance of FadeInUp and SlideIn Up Animations in Elementor */
@-webkit-keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 30%, 0);
transform: translate3d(0, 30%, 0)
}
to {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
@-webkit-keyframes slideInUp {
from {
-webkit-transform: translate3d(0, 80%, 0);
transform: translate3d(0, 80%, 0);
visibility: visible
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
}
/* Style Click Box custom element for desktop */
@media (min-width: 769px) {
.click-box {
position: relative;
}
body:not(.elementor-editor-active) .click-box .elementor-widget-button {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
body:not(.elementor-editor-active) .click-box .elementor-widget-button>.elementor-widget-container,
body:not(.elementor-editor-active) .click-box .elementor-widget-button>.elementor-widget-container>.elementor-button-wrapper,
body:not(.elementor-editor-active) .click-box .elementor-widget-button>.elementor-widget-container>.elementor-button-wrapper>.elementor-button {
width: 100%;
height: 100%;
color: transparent;
border: 0;
background-color: transparent;
}
.click-box:hover .elementor-widget-text-editor,
.click-box:hover .elementor-widget-heading {
color: #fff;
}
body:not(.elementor-editor-active) .click-box-image:not(:hover) .elementor-widget-container {
opacity: 0;
}
}
/* Overflow hidden class on columns to stop animations outside of element - optional */
.overflow-hidden {
overflow: hidden;
}
/* End GeneratePress Site CSS */Hi there,
i just checked your site and that CSS is working - i can see the CSS being applied and the effect is visible on the front end. Although it is not very noticeable.
Hi David
You looked this pages https://proves.ccfoto.cat/bold/avis-legal/
Do you think the text is justified?
I see the text from right to left without justifying.
Thanks
OK - i think we misunderstand
Do you want to reduce the content width on that page ?
Go to Appearance > Elements and edit Page builder layout on the Display Rules tab, select Exclude > Page > and add the problem page here
Hi David
It works and now appear another issue I upload a picture.
The main picture isn't justified at the top of the page.
And sorry for my English maybe I don't use fluently I am learning at this moment.
Thanks
Go to Customizer > Layout > Container and set the Top Padding to 0
Hi David.
It works.
Until next time.
Thanks a lot.
Happy to be of help :)
