Small CSS Tweak Needed on a Downward Arrow

[Chris Moore]

Hello!

I have a CSS challenge for all of you... 🙂

I am trying to get the downward arrow on the h2 elements ("What We Do" and "Our Trusted Approach") on this page to always be centered, no matter how you resize the browser. These downward arrows were created with CSS, using this code:

`
.bubble:after {
content: "";
position: relative;
bottom: -9px;
left: 272px;
border-width: 14px 13px 0;
border-style: solid;
border-color: #365b9b transparent;
display: block;
width: 0;
}
`

Also, if you notice anything else on the page that needs fixing, or if there is a better way to do anything that I have already done, please do advise.

This page is unfinished and is also password protected. The password is: temp

http://moorecreativeideas.com/new-about-page/

Thanks for your help everyone!

~ Chris M.

---

Resepctfully, Chris Moore
Web Dev, CSS Hacks, & Biz Consulting @ MooreCreativeIdeas.com / Blogging @ ReflectOnThis.com

[David Chu]

Hi,
A very interesting brain-teaser. I don't have a bulletproof answer, but I can get you close with one quick hack. Note my "left" setting below. That's my only change. If it weren't for the 2 big boxes underneath it, this would probably pass muster. It's slightly off at a reduced size, relative to these boxes. But it's decent. Adjust to taste, and you could always play with that figure at smaller media query size settings.

.bubble:after {
  border-color: #365B9B transparent;
  border-style: solid;
  border-width: 14px 13px 0;
  bottom: -9px;
  content: "";
  display: block;
  left: 45.5%;
  position: relative;
  width: 0;
}

Dave

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[Chris Moore]

Impressive, David Chu! Much thanks!!! This nailed it...

Do you notice anything else that needs attention (I have made some changes), especially watching the resizing of the boxes and the placement of the images, etc., as the different media queries hit? I would reallllly appreciate some help.

Once again, the password for the page is: temp

http://moorecreativeideas.com/new-about-page/

---

Resepctfully, Chris Moore
Web Dev, CSS Hacks, & Biz Consulting @ MooreCreativeIdeas.com / Blogging @ ReflectOnThis.com

[David Chu]

I did a refresh to get your changes, and looked at it at various sizes. It looks quite good. I don't have a whole lot of other suggestions, I'm not OCD. 🙂 But it generally looks very good, I think.

My one thought might be bumping paragraph size down a bit at really small sizes, but even that's pretty optional.

D

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[Chris Moore]

Thanks again!

It's now live!!! (The demo page is now inoperable)...

http://moorecreativeideas.com/about/

---

Resepctfully, Chris Moore
Web Dev, CSS Hacks, & Biz Consulting @ MooreCreativeIdeas.com / Blogging @ ReflectOnThis.com

[Author]

Posts