On this page https://pideja.ca/about/, I’m trying to size the text-block so it is narrower.
So, I edited the CSS file to read:
`.slug-about .the__copy {
background-color: #393939;
padding: 175px 250px 0 250px;
}`
But this does not seem to affect the way the text is displayed.
In Backlight, I tried to edit some parameters, in the About page template and/or the Pages template.
It is affecting the text. Try clearing browser cache to see it.
But you’ll need to put it in a media query otherwise the text will be unreadable on mobile devices.
Thanks Rod, works great.
Used this media query:
@media screen and (max-width: 1920px) {
.slug-about .the__copy {
background-color: #393939;
padding: 25px;
text-align: justify;
}
This seems to affect any screen below 1440px, the size determined in Backlight. It’s kinda strange but I’m ok with that.
For the moment, at least.
that make sense. You’re css above is used if the browser is 1920px or below.
Above 1920px some other custom css of yours takes over.
It doesn’t look all that great above 1920px. Can you view the page at 1920+px?
One reason is some competing css you’ve written, like this:
.the__copy {
font-size: 2rem;
line-height: 1.5rem;
}
(line 117 of your custom css)
Well, my screen is 1920px x 1080px so I can’t tell how it would look at over 1920px.
Except for the rather smallish type, I’m OK with it.
But, looking at that page in different browsers yealds different results. In fact, there are two groups: Chrome (my reference) and Brave and then there are Safari, Edge, Firefox and Opera. The four latter ones seem to interpret the upper padding differently.
it looks the same to me in Firefox, Chrome, Opera, and Edge. Be sure to try clearing browser cache if things look different.
This is what it looks like when the browser gets wider than 1920px:
yup.
Sorry to bring this up again, but I’m having a hard time with the “About” page text. I’d like it justified but the CSS I have does not seem to affect it:
/* About page main copy */
.slug-about .the__copy {
background-color: #393939;
margin-top: 100px;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 0px;
text-align: justify;
}
But this one seems to affect it:
.the__copy>.content {
background-color: transparent;
border-radius: 0;
box-shadow: none;
padding: 0 0;
width: 100%;
max-width: 1440px;
text-align: center;
}
The problem is it also affects all the pages of the site.
In the first example, the .slug-about .the__copy has no effect I can see.
Tried formatting directly the HTML using a combination of p, h3 and br tags.
Works for the larger screen but looks awful on the mobile. I’m guessing there is a more efficient way of doing this…
I think I fixed it…at least, it looks like it.
Large screen displays:
/* About page main copy */
.slug-about .the__copy h3{
background-color: #393939;
margin-top: 100px;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 0px;
text-align: justify;
text-justify: inter-word;
}
and for the mobile…
@media screen and (max-width: 1920px) {
/* About page main copy */
.slug-about .the__copy h3{
background-color: #393939;
margin-top: 100px;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 0px;
text-align: left;
}
your html is strange, you’ve got paragraphs inside of an h3 heading.
Not sure I understand. Of course, the h3 marker indicates a header. But why can’t the whole text be a header? I’m only trying to control the size of the copy and the format of the paragraph.
Using h3 at the top of the content, with p markers to indicate paragraphs, the page looks almost as intended. The text is aligned left (I would prefer justified) and the font size is ok:
I realize that all this should be controlled with CSS. But there is no response when editing the .slug-about .the__copy witch should be the correct CSS section. And, if I edit the .slug-about .the__copy section for the margin/padding settings, it also influences the
@media screen and (max-width: 992px) .slug .the__copy instruction.
You can use headings to control size of the text, but that’s not really what the heading tags are for. They have meaning in SEO
https://www.tutorialrepublic.com/html-tutorial/html-headings.php
I think there’s a more specific rule in your custom css that’s controlling that.
directly above your .slug-about .the__copy rule is your .the__copy>.content rule that contains text-align:center;
if I change that to text-align: justify; then the text on the page is justified.
see if this works:
.slug-about .the__copy>.content {
text-align:justify;
}
You have a lot of rules using .the__copy. Seems like some are conflicting.
Yes, Rod, I am aware of the multiple the__copy instructions. I am in the process of commenting and checking witch does what.
I am also aware that the first the__copy setting seems to influence the overall text on all pages. That’s why it’s set at centered. That HOE page (the one with the animation) should be set at center. If I set it at justify, all text on all pages goes justified.
I just set the the__copy at justify: looks great on the About page (but awfull on the mobile) but not too great elsewhere.
That’s because you’ve got 200px of left and right padding in your custom css in the rule starting on line 15
Changed that to 0 0 0 0 padding. Solves the positioning on the large screen and…on the mobile as well! That’s fine, but it shouldn’t be I think.
What’s frustrating is that there is so much stuff in the CSS that I have a hard time having an overall understanding of the relationships between the settings.