Just to clarify instead of the other code or with the other code?

A mock up would not really help. The icons need to be centered on the top of the boxes on all types of browsers.

I am grateful for your help. You have helped me a ton in the course of editing this website.

These icons in particular have been a thorn in my side. They are not centering no matter what I do. So if you look at the Who We Serve on a desktop and on mobile browser as well as an ipad.

The top box and the two boxes below with icons on top. on desktop the icon is close to center. But on all other browsers not even. And when you look at it on a phone the first box icon is off center to the left and the other two are off center to the right. It looks terrible.

I have tried several things to try to get them to align and I am pretty frustrated and that is why I asked for help.

I am so sorry I was tired when I wrote that message. Steadfast Real Estate Advisors

btw on regular mobile when in landscape the icons on the who we serve page are not centered either. :) I am sort of blah about it. lol

Yigit before the:

return $fonts;

depending on whether I need it in the heading or content?

Thanks for answering my questions. :)

Thank you for your help. So what happens if I want more than one type of Roboto font? For example I want to add Regular Roboto to the content too.

Thanks again for your help

It still does not show in portrait mode and the links just squish all funky in landscape mode. On the iPad the links are offset below the copyright line.

I could not get my phone to screenshot for some reason so when I was trying it by squishing the browser it did the same thing. http://prntscr.com/bgj464

• This reply was modified 8 years, 5 months ago by evan_friedl.

There is no footer on the main page so here is a secondary page. Who We Serve Page

I did as you asked and I cleared my browser cache and it still is doing it on my Note 4 in portrait mode. We also tested it on a iphone. It still was doing the same thing.

So I was looking at the toggle/accordion box and it was doing what we needed for these boxes. So I made some css experiments and finally got something so its at least decent looking across all browsers/sizes and squishing.

This was the code for it and even though it says div there I used spans around my actual special headings.

div .heading-border{
border-style: solid; 
border-width:2px; 
padding: 5px;
border-color: #666666;
text-shadow: 1px 1px 5px #ffffff !important;
}

div .heading-border2{
border-style: solid; 
border-width:2px; 
padding: 5px;
border-color: #FFFFFF;
box-shadow: 1px 1px 5px #1e4371 !important;
}

@media only screen and (max-width:1064px) and (min-width: 320px) {
div .heading-border{
border-style: solid; 
border-width:2px; 
padding: 5px;
border-color: #666666;
text-shadow: 1px 1px 5px #ffffff !important;
width: 100%;
    float: left;
    display: block;
    margin: 0 0 -2px 0;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: -2px;
    margin-left: 0px;
    padding-bottom: 1px;
    overflow: hidden;
    overflow-x: hidden;
    overflow-y: hidden;
    position: relative;
}

div .heading-border2{
border-style: solid; 
border-width:2px; 
padding: 5px;
border-color: #FFFFFF;
box-shadow: 1px 1px 5px #1e4371 !important;
width: 100%;
    /*float: left;*/
    display: block;
    margin: 0 0 -2px 0;
    margin-top: 0px;
    margin-right::0px;
    margin-bottom: -2px;
    margin-left: 0px;
    padding-bottom: 1px;
    overflow: hidden;
    overflow-x: hidden;
    overflow-y: hidden;
    position: relative;
}
}

@media only screen and (max-width: 320px) {
.av-special-heading-tag {
    font-size: 2.5vh !important;
}

}

Thank you for trying to help I appreciate it.

RobertDawes you probably should make your own thread.

You can use this one.

That helps but it looks a bit silly floating all the way to the left while the rest of the content is centered:

http://prntscr.com/b8ytnm

Any other ideas?

Fantastic Vinay. I apologize for not getting back sooner but I have been busy.

So ideally we do not want the Email Address Label at all. But getting rid of the label seems to cause the input box to slide up and if I put the title as the label when you squish the browser the input box goes down (because STAY UP TO DATE WITH SREA & INDUSTRY NEWS is so long) but the button stays in place.

Using the label as the title http://prntscr.com/b7lk0z
Taking the label out all together and using the widget title: http://prntscr.com/b7lkyk

Any suggestions for that?

Thank you very much this was perfect!

Please note I took out the CSS you put in for the enfold-test because it was affecting the contact page

Is it possible to do what we want to do with the footer mailchimp widget form without affecting the contact page and all the other forms on the website?

• This reply was modified 8 years, 6 months ago by evan_friedl.