-
AuthorPosts
-
February 6, 2014 at 1:51 am #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.
thanksFebruary 6, 2014 at 5:29 am #220314Hi Munford!
Could you please indicate where are the icon boxes in question?
Best regards,
JosueFebruary 6, 2014 at 12:34 pm #220430they are on that page in the middle and near the bottom – transparent overlays on an image background
February 7, 2014 at 9:42 am #220817any suggestions?
February 8, 2014 at 4:21 am #221101Hey!
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,
JosueFebruary 8, 2014 at 1:48 pm #221219that 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 10 years, 10 months ago by Munford.
February 9, 2014 at 6:16 am #221300Hi,
The page you linked is displaying a 404 error.
Cheers!
JosueFebruary 9, 2014 at 2:38 pm #221347sorry!
it’s at the bottom of this page
http://www.copenhagenfilmcompany.dk/2014/February 9, 2014 at 7:07 pm #221373Hi!
I see i centered and it is responsive, could you create a mockup of what you want to achieve?
Best regards,
JosueFebruary 10, 2014 at 1:21 am #221465I 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
February 10, 2014 at 6:14 am #221522Hey!
Please try this:
.iconbox { opacity: 0.4; width: 80%; margin: 0 auto !important; }
Best regards,
IsmaelFebruary 10, 2014 at 11:52 am #221642http://www.copenhagenfilmcompany.dk/2014/
still not centered! I hav cleared my cache, etc.
not sure what is going on there.
?
thanksFebruary 10, 2014 at 3:35 pm #221700Hey!
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,
YigitFebruary 10, 2014 at 4:20 pm #221719great 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
nFebruary 10, 2014 at 5:47 pm #221767Hey!
Please try adding following code to Quick CSS as well
.page-id-5988 .avia-builder-el-23 { width: 5%; }
Best regards,
YigitFebruary 11, 2014 at 6:17 pm #222325that 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 10 years, 10 months ago by Munford.
February 11, 2014 at 7:05 pm #222350Hi!
Try the following:
.avia-builder-el-24 { width: 9.333333% !important; } .avia-builder-el-20 { margin-left: 9.333333% !important; }
Best regards,
JosueFebruary 12, 2014 at 11:29 am #222695I 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 10 years, 10 months ago by Munford.
February 13, 2014 at 4:07 pm #223479Hey!
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,
YigitFebruary 13, 2014 at 7:18 pm #223586that did not work for me.
February 13, 2014 at 9:40 pm #223660Hi!
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!
JosueFebruary 14, 2014 at 1:01 pm #223926that 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)?
ThanksFebruary 14, 2014 at 1:13 pm #223936Hey!
#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,
YigitFebruary 14, 2014 at 1:30 pm #223949Thanks – 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 10 years, 10 months ago by Munford.
February 14, 2014 at 1:48 pm #223963This reply has been marked as private.February 15, 2014 at 4:29 pm #224351Hi!
The blog page works now. I just deselected the “Posts page:” on the Settings > Reading option page.
Regards,
PeterFebruary 15, 2014 at 4:40 pm #224357Thanks!
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 10 years, 10 months ago by Munford.
February 19, 2014 at 7:58 am #225989Hi!
I can’t find the “Nyheder” pages in the menu – did you remove these pages?
Cheers!
PeterFebruary 19, 2014 at 10:06 am #226065yes – 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!February 19, 2014 at 10:15 am #226073Hi!
O, I’ll close this thread. Please create a new thread if necessary.
Best regards,
Peter -
AuthorPosts
- The topic ‘icon box styling’ is closed to new replies.