• Closed
  • Greg Vaughan
    Spectator
    June 9, 2016 at 10:07 pm #28305

    As shown in the attached image, the 4th front page content box is dropped down to a second row, despite there being plenty of room for all content boxes to appear on the same row.

    http://www.bbblack.com/Images/BBB%20home%20page%20problem.jpg

    I think this problem may be related to the recent addition of custom CSS codes. You have provided custom codes to allow me to manipulate icons, fonts, margins, and padding of the content box area. With those custom codes I have been able to format the content buttons as desired, but now I have this new problem.

    Also, please note that this “inline” problem happens in Safari on my desktop computer, but not in Firefox, where the content boxes appear correctly. However, on an iPad or iPhone, this problem occurs with any browser.

    Here are my current custom CSS code settings related to the front page content boxes:

    .content-box h2 {
    font-size: 20px !important;
    }
    .home-content-boxes a {
    font-size: 11px !important;
    }

    .home-content-boxes h2 {
    margin-top: 5px !important;
    }
    .home-content-boxes p {
    margin-top: -10px !important;
    margin-bottom: 0px !important;
    }
    .home-content-boxes a {
    margin-top: 10px !important;
    }
    .home-content-boxes {
    position: relative;
    top: -45px !important;
    margin-bottom: -80px !important;
    }

    .home-content-boxes p {
    font-size: 15px !important;
    }

    .content-box i {
    font-size: 30px !important;
    }
    .cntbox_btn a {
    line-height: 2.5em !important;
    padding: 0 10px !important;
    left: 35% !important;
    }

    Daniel Jones
    Spectator
    Posts: 148
    June 9, 2016 at 11:22 pm #28311

    Hi Greg,

    Thanks for your reply,

    To rectify this issue, we will need to utilize a specific CSS Selector to isolate the fix for the Safari browser.

    You may use the following Custom CSS Code to resolve this request.


    /* Safari Only | Adjusts the width of the content box in Safari Web Browser*/
    @media screen and (-webkit-min-device-pixel-ratio:0){
    .home-content-boxes .col-md-3.content-box{
    width: 22% !important;
    }
    }

    Please let me know if there are any more questions that I may answer for you 🙂

    Cheers!

    Greg Vaughan
    Spectator
    Posts: 27
    June 9, 2016 at 11:30 pm #28312

    Daniel, thanks for the prompt reply, but the problem is not restricted to the Safari Browser. On iPad and iPhone, the front page content boxes do not align properly using Firefox, Safari, or Chrome. Can you recommend a fix that will align the content boxes on all devices and all browsers?

    Daniel Jones
    Spectator
    Posts: 148
    June 10, 2016 at 3:29 pm #28324

    Hi Greg,

    Thanks for reaching out to us again.

    Kindly could you share with me the link to the site so that I may a look at it and figure out the issue.

    Looking forward to hear from you.

    Greg Vaughan
    Spectator
    Posts: 27
    June 10, 2016 at 6:16 pm #28327
    This reply has been marked as private.
    Daniel Jones
    Spectator
    Posts: 148
    June 11, 2016 at 9:58 am #28335

    Hi Grey,

    Thanks for sharing that info.

    I have tried to fix the issue, it is now fine, kindly check again.

    Please let me know if there’s anything else.

    Greg Vaughan
    Spectator
    Posts: 27
    June 12, 2016 at 10:29 pm #28352
    This reply has been marked as private.
    Greg Vaughan
    Spectator
    Posts: 27
    June 13, 2016 at 8:14 pm #28390
    This reply has been marked as private.