Tagged: ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • August 12, 2015 at 2:15 am #486262
    jennifer

    Hello, I’d like to know how to center an icon box (small icon to left) so it aligns with a centered heading within a single column element.
    Can you help?

    August 12, 2015 at 1:02 pm #486489
    Yigit

    Hey Jennifer!

    Can you please post a screenshot and show the changes you would like to make? I am not sure if i understand it clearly.

    Regards,
    Yigit

    August 12, 2015 at 3:21 pm #486613
    jennifer

    Hi Yigit –
    I have attached a link to the screenshot below.

    Thank you,
    Jennifer

    August 12, 2015 at 3:25 pm #486616
    Yigit

    Hi!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    .single-product header.entry-content-header {
    text-align: center;
}
.single-product .iconbox_icon.heading-color {
    left: 36%;
}

    Best regards,
    Yigit

    August 12, 2015 at 3:57 pm #486641
    jennifer

    Thanks for the very quick reply, Yigit.
    One issue though: I have a lot of icon boxes throughout the site. I only want to apply the centering selectively to icon boxes that I have marked individually with the custom CSS “destination-iconbox”
    Can you tell me how I modify the code above to do that?

    Thanks,
    Jennifer

    August 13, 2015 at 7:01 am #486954
    Rikard

    Hi,

    You can do that by adding the page-id class (inspect the page, you will find the page id in the body tag) before Yigits code to only have the code affect the page in question, or add a container class before in order to for it to only affect a specific section. If you need help then send us the pages in question and specify where you’d like the code to affect.

    Thanks,
    Rikard

    August 4, 2020 at 2:58 pm #1235108
    Eleina_Shinn

    Hi:

    I am wanting to do the same thing. I am using the Icon Box Element – with the style small icon at the left side of the title. I’d like the icons and the title to be centered – so the icon is immediately to the left of the title, but the whole thing is centered in the column, just like this webiste sample, you’ll see just above the footer: https://watches-theme.myshopify.com/?fts=0

    My site is here: https://0a37a07f99.nxcli.net/

    I’ve given my iconbox a class .custom-icon and tried this code:.custom-icon .iconbox_content_title {text-align: center !important;}

    But it only centeres the text – the icon doesn’t come with it…

    I tried the other code in this thread but it didn’t work.

    Thank you!

    August 4, 2020 at 6:16 pm #1235154
    Nikko

    Hi Eleina_Shinn,

    Please try adding this CSS code in Quick CSS:

    .custom-icon .iconbox_content .entry-content-header {
    text-align: center;
}

.custom-icon .iconbox_icon, 
.iconbox .iconbox_content .iconbox_content_title {
    display: inline-block;
    float: none;
    position: static;
}

.custom-icon .iconbox_icon {
    margin-right: 8px;
}

    Best regards,
    Nikko

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.