Aligning Text boxes

taapsir · Member · Jan 16, 2016 at 4:30 am
Copy link

Add topic to favorites
Hi,
On my homepage, I would like to align “Recent Projects” with the left border of “FactSet”. Similarly, I would like to align the box “View All” under “Recent Projects” to the edge of “CARILED” as well as in line with the top part of “Recent Projects.”

The same goes for the “Hot off the Presses” section. I’d like to align the title with the border of the first blog image, and align “View All” with the edge of the third blog image as well as top-aligned with “Hot off the Presses”.

I hope this can be done because right now everything looks like it’s floating in mid-air.

Thank you so much.

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Jan 19, 2016 at 6:29 am
Copy link
Hi, I see recent projects in line with factset and the view all is aligned on the right with cariled.

On moving view all up, we have to limit this change to screens/windows 701px and wider otherwise things go awry when it all goes to one column. Go to Appearance > Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS and see what you think.
```
@media screen and (min-width: 701px) {
.home-section .section-head h3 {
    max-width: 50%;
}
.home-section .viewAll {
    top: 35px;
}
}
```
thesacredpath · Member · Jan 19, 2016 at 6:34 am
Copy link
For hot off the presses, I see the title in alignment with the border of the first blog image.

For the view all button, the button is aligned to the top of hot off the presses. To align it better with the right edge of the image below it, add the following CSS.
```
#home-posts .section-head .viewAll {
    right: 12px;
}
```
taapsir · Member · Jan 19, 2016 at 6:39 am
Copy link
Hi!
I tried that and the boxes were even more off.
I just checked the website again with all my CSS still there.
The only issue right now are the two “View All” boxes. Somehow the Topic Titles are all aligned. Not sure what happened there but I guess that’s some good news?
taapsir · Member · Jan 19, 2016 at 6:57 am
Copy link
yes, that worked!
But the View All button under the Hot Off the PResses section is not aligned to the top of Hot Off the Presses. What would be the CSS to use to align it upwards? top: 12px didn’t work :)

Also, how would I similarly adjust the ViewAll for the Recent Projects section?

Thank you so much.
thesacredpath · Member · Jan 19, 2016 at 7:33 pm
Copy link
Hmmm, strange. It was aligned top when I was working on things. Change the rule I gave you to this, which adds a top declaration and aligns the button with the title of the section.
```
#home-posts .section-head .viewAll {
    right: 12px;
    top: 35px;
}
```
thesacredpath · Member · Jan 19, 2016 at 7:35 pm
Copy link
For recent projects, the first rule I had given aligns the View All to the top. This one.
```
@media screen and (min-width: 701px) {
.home-section .section-head h3 {
    max-width: 50%;
}
.home-section .viewAll {
    top: 35px;
}
}
```
taapsir · Member · Jan 19, 2016 at 7:44 pm
Copy link
worked like a charm :)
thank you!
taapsir · Member · Jan 19, 2016 at 7:50 pm
Copy link
thesacredpath, would it please be possible for you to help me figure out the formatting of the featured pages content (“Process” section) on the home page? i have a separate thread started for that. I don’t want to publicize my website till that content shows up as bullet points. Thank you in advance!
taapsir · Member · Jan 19, 2016 at 8:00 pm
Copy link
Can I also align the Testimonials heading the same way as we did the ViewAlls? I just noticed that was not aligned either.

And although I didn’t touch any CSS for the Process section, the Process site title has suddenly jumped to the left! Not sure what happened…

thanks again.
thesacredpath · Member · Jan 20, 2016 at 6:41 am
Copy link
For Testimonials, find this rule in your CSS and add the left-align declaration.
```
.home-section .section-head h3 {
    max-width: 50%;
    text-align: left;
}
```
thesacredpath · Member · Jan 20, 2016 at 6:50 am
Copy link
@taapsir, I’ve replied in the other thread on the Process section.
taapsir · Member · Jan 20, 2016 at 2:52 pm
Copy link
Hi,
Is there way to control how far left it goes?
With the CSS right now, it’s too far left :(
taapsir · Member · Jan 20, 2016 at 2:57 pm
Copy link
actually, please ignore that.
The testimonials look fine.
thank you!
thesacredpath · Member · Jan 20, 2016 at 9:06 pm
Copy link
You are welcome.

No items found.