Viewing 30 posts - 1 through 30 (of 30 total)
  • Author
    Posts
  • #220209

    Hi
    I am styling the icon box on this page:

    http://www.copenhagenfilmcompany.dk/2014/

    and need it to be narrower (900px) and centered.
    When I tried this:

    .iconbox{
    opacity:0.4;
    width: 900px;
    align: center;
    }

    #top .iconbox_top{
    margin-top:65px;
    margin-bottom:45px;
    text-align: center;
    }

    .iconbox_icon {
    display: none!important;
    }

    it was not centered, and did not shrink on the mobile correctly.
    Much appreciate it if you could help with this.
    thanks

    #220314

    Hi Munford!

    Could you please indicate where are the icon boxes in question?

    Best regards,
    Josue

    #220430

    they are on that page in the middle and near the bottom – transparent overlays on an image background

    #220817

    any suggestions?

    #221101

    Hey!

    Try with this code:

    .avia-builder-el-25 .iconbox{
    opacity:0.4;
    width: 90% !important;
    margin: 0 auto;
    }
    

    To center an element you use margin: 0 auto, the width should not be set in px, but in percentage in order to keep responsiveness.

    Best regards,
    Josue

    #221219

    that is not working for me, on this page now:

    http://www.copenhagenfilmcompany.dk/2014/landing_final2-2/

    .avia-builder-el-27 .iconbox{
    opacity:0.4;
    width: 90% !important;
    margin: 0 auto;
    }

    something is not right….
    thanks for your help!

    • This reply was modified 7 months, 1 week ago by  Munford.
    • This reply was modified 7 months, 1 week ago by  Munford.
    #221300

    Hi,

    The page you linked is displaying a 404 error.

    Cheers!
    Josue

    #221347

    sorry!
    it’s at the bottom of this page

    http://www.copenhagenfilmcompany.dk/2014/

    #221373

    Hi!

    I see i centered and it is responsive, could you create a mockup of what you want to achieve?

    Best regards,
    Josue

    #221465

    I added this:

    .iconbox{
    opacity:0.4;
    width: 90%;
    margin: 0; auto;
    }

    on this page near the bottom – now the width is right (90%) but it is not centered.

    http://www.copenhagenfilmcompany.dk/2014/

    thanks

    #221522

    Hey!

    Please try this:

    .iconbox {
    opacity: 0.4;
    width: 80%;
    margin: 0 auto !important;
    }

    Best regards,
    Ismael

    #221642

    http://www.copenhagenfilmcompany.dk/2014/

    still not centered! I hav cleared my cache, etc.
    not sure what is going on there.
    ?
    thanks

    #221700

    Hey!

    Please add following code to Quick CSS

    #top .iconbox_top {
    margin-top: 65px!important;
    margin-bottom: 45px!important;
    text-align: center;
    margin: 0 auto;
    }

    Regards,
    Yigit

    #221719

    great that did it! thanks.

    On the same page, what is the best way to move the 2 1/3 columns closer together –
    the ones with the “corporate” and “short & doc” logos in them – right now I have 3 1/3 columns
    with the center one empty. I need less space between them.
    tried some stuff that didn’t work!
    thanks
    n

    #221767

    Hey!

    Please try adding following code to Quick CSS as well

    .page-id-5988 .avia-builder-el-23 { width: 5%; }

    Best regards,
    Yigit

    #222325

    that shrunk the left logo down to 5%!
    if you look here:

    http://www.copenhagenfilmcompany.dk/2014/

    I need the center 1/3 column between the logos to be about 200px
    with them all still centered.
    thanks

    • This reply was modified 7 months, 1 week ago by  Munford.
    #222350

    Hi!

    Try the following:

    .avia-builder-el-24 {
        width: 9.333333% !important;
    }
    .avia-builder-el-20 {
        margin-left: 9.333333% !important;
    }

    Best regards,
    Josue

    #222695

    I added some elements to the page and so changed the designation of the avia.builders but having problems:

    http://www.copenhagenfilmcompany.dk/2014/

    I removed the css code as it was shrinking the logo again, and messed up other elements on other pages with avia elements of the same number.
    ?
    thanks!

    • This reply was modified 7 months, 1 week ago by  Munford.
    • This reply was modified 7 months, 1 week ago by  Munford.
    • This reply was modified 7 months, 1 week ago by  Munford.
    #223479

    Hey!

    Please try adding following code to Quick CSS instead

    #after_section_1 .avia-builder-el-24 { width: 9.333333% !important; }
    #after_section_1 .avia-builder-el-20 { margin-left: 9.333333% !important; }

    Best regards,
    Yigit

    #223586

    that did not work for me.

    #223660

    Hi!

    The code is not being applied because it appears you have changed some elements order, therefore nulling the effect that the CSS should do.

    Right now with your current setup, this is working:

    #after_section_1 .avia-builder-el-27 { width: 9.333333% !important; }
    #after_section_1 .avia-builder-el-23 { margin-left: 9.333333% !important; }

    If you change that page you’d need to tweak the CSS code again, you can check the class names if you inspect those columns with the Chrome Dev Tools (el-27 is the empty middle column and el-23 is the first column).

    Cheers!
    Josue

    #223926

    that does work now, but is affecting items on this page:
    http://www.copenhagenfilmcompany.dk/2014/about/ which has the same avia el-builder numbers.
    How do I specify the changes only on that page (and the danish equivalent)?
    Thanks

    #223936

    Hey!

    #after_section_1 is ID of your Color section. You can edit the one you would like to apply the code, change its ID ( I.E.: colorsection1 ) then adjust custom CSS code as following

    #colorsection1 .avia-builder-el-27 { width: 9.333333% !important; }
    #colorsection1 .avia-builder-el-23 { margin-left: 9.333333% !important; }

    Best regards,
    Yigit

    #223949

    Thanks – I put that code in and now it is not making the changes I wanted.
    I don’t see where to find the colorsection ID – I’m looking at the INSPECT ELEMENT in google developer.

    I have other BIG problems now that I hope you can help me with:
    Using WPML and getting 404 errors now randomly on various pages:

    http://www.copenhagenfilmcompany.dk/2014/news-blog/

    and also spent the whole day yesterday fixing and refixing pages and links that would then default
    to the english pages (including renaming the pages and permalinks). I have just fixed them
    again but the whole site seems unstable now as I am seeing all 404 errors except for the landing pages.
    Any ideas what is happening here? I am freaking out!
    thanks
    n

    • This reply was modified 7 months ago by  Munford.
    • This reply was modified 7 months ago by  Munford.
    #223963
    This reply has been marked as private.
    #224351

    Hi!

    The blog page works now. I just deselected the “Posts page:” on the Settings > Reading option page.

    Regards,
    Peter

    #224357

    Thanks!
    Could you check the config of the WPML – it was very unstable
    before I reinstalled a new version of the plugins, but I’m not sure
    it’s set right. I am seeing a problem on the News / Nyheder pages
    which do not link correctly in the language switcher. Keeps defaulting
    to the landing. also, if you try to go to Nyheder from this page:

    http://www.copenhagenfilmcompany.dk/2014/portfolio-item-da/mexico-express-2/?lang=da

    it gets a 404 error on a different site directory. ???
    thank you for your help!
    you have a login, yes?
    n

    • This reply was modified 7 months ago by  Munford.
    #225989

    Hi!

    I can’t find the “Nyheder” pages in the menu – did you remove these pages?

    Cheers!
    Peter

    #226065

    yes – I am working on the WPML setup and had to take down the pages I had
    done before. I will let you know if I am still having problems with that. thanks!

    #226073

    Hi!

    O, I’ll close this thread. Please create a new thread if necessary.

    Best regards,
    Peter

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

The topic ‘icon box styling’ is closed to new replies.