Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #11387

    Hello,

    I am using Flashlight and it is a GREAT theme. I am having a problem aligning icon boxes to the center of the screen (horizontally). No mater what justification I use in the ‘Visual’ text editor (left, center, right) the icon box always appears with left justification.

    Ideally I would like to align the icon box to the center of 2-column entries (i.e. center of each column, horizontally). Any solutions or work-arounds?

    Thank you so much.

    #71569

    Hi commonmodel,

    Can you provide a link to the page you are trying to get the effect on? You aren’t able to apply visual editor effects to shortcode alone, you’ll need to apply css to the elements after they are created.

    Regards,

    Devin

    #71570

    The website is actually in Maintenance Mode right now, so I am afraid you would not be able to see it. Here are some screenshots to describe what I would like to do:

    2 Column Layout using 2 Icon Boxes (see red lines on page 2):

    http://www.filedropper.com/2columnusing2iconboxes

    3 Column Layout using 3 Icon Boxes (see red lines on page 2):

    http://www.filedropper.com/3columnpostusing3iconboxes

    Thank you

    #71571

    Hi commonmodel,

    Both links just go to the filedropper home page.

    If you’d like you can send me login credentials so that I can see the site live at: DevinVinson (at) gmail.com. Make sure to include a link to this topic or my spam filter will put it into my junk folder.

    Otherwise, what you’ll need to do, is add a css style for the individual elements to align them as you’d like. Even then, it may not be possible to center them perfectly, but you can fake it with margins or padding.

    Regards,

    Devin

    #71572

    Hi Devin,

    My apologies on the filedropper links; I am not familiar with a better file hosting site (or how to do that with my own hosting). My site is live now, so feel free to check it out! http://CommonModel.com

    The two pages that I would like to use a center alignment within icon box columns are http://CommonModel.com/brand/ and http://CommonModel.com/contact/

    I am new to css development, so any tips you could give regarding your suggestion to “add a css style for the individual elements” would be much appreciated.

    Thank you!

    #71573

    Hello,

    Nice work on customizing the theme. :)

    You can drop this line on your custom.css

    .iconbox_icon {
    float: left;
    padding: 8px 5px 0 0;
    width: 100px;
    }

    Regards,

    Ismael

    #71574

    Hi Ismael,

    I plugged this into the Theme Options > Styling > Quick CSS and saved the changes, but it did not do anything. Is this what you mean by custom.css? If not, how do I access my custom.css? Do I need the Custom CSS upgrade for WordPress?

    Thanks for dealing with me and my n00b self.

    #71575

    Hi commonmodel,

    Site looks great! You are correct in where to put it but lets take the css Ismael provided and push it a bit further :)

    .iconbox_icon {
    float: left;
    padding: 8px 5px 0 0;
    width: 100px;
    }

    .iconbox_icon img {
    margin-left: auto !important;
    margin-right: auto !important;
    }

    If it messes with icons in a way you don’t like on other pages, we can have it target only specific ones if you’d like.

    Regards,

    Devin

    #71576

    Devin and Ismael,

    You’ve done it! This code will do just fine. I have updated the site and it looks pretty good! Thank you so much for your help. I really appreciate it!

    Great theme, Great support! Issue: RESOLVED.

    Best wishes,

    http://CommonModel.com

    #71577

    Great! Glad Devin and Ismael were able to help!

    Regards,

    Mya

Viewing 10 posts - 1 through 10 (of 10 total)

The topic ‘Center Alignment for Icon Box?’ is closed to new replies.