- This topic is empty.
-
AuthorPosts
-
August 30, 2012 at 9:16 pm #39589craigmurrayMember
Hello. I’m super rusty on my CSS and trying to style my new site a little http://craigmurray.virb.com/work
I would like to get all thumbnails on this page (960px wide) in a 3 column grid @ 300px wide with 30px gutters (to match up with the footer I have). I tried taking the 3rd thumbnails right margin off to fit evenly on the page.
However, the following code isn’t working for some reason:
#index ul.thumbs li {
float: left;
width: 300px;
margin: 0 30px 30px 0;
padding: 0;
border: 1px solid white;
min-height: 150px;
}
#index ul.thumbs li img {
width: 300px;
}
#index ul.thumbs li.li_3, #index ul.thumbs li.li_6
{
margin-right: 0;
}
#index ul.thumbs li.li_4, #index ul.thumbs li.li_7 {
clear: both;
}Any help to clear up this problem would be awesome. Thanks in advance for the support.
August 30, 2012 at 10:31 pm #108788wolfcry911Participantthere’s not enough width. You’ve got 300px li with 1px border (302px) x 3 + 30px gutter x 2 = 966px. Reduce the li to 298 or remove the border or widen the container or reduce the gutter.
August 31, 2012 at 11:14 am #108819craigmurrayMemberThx Wolfcry911.
I changed li to 298, reduced gutters and curbed the following code edits,:
#index ul.thumbs li {
float: left;
width: 298px;
margin: 0 16px 30px 0;
padding: 0;
}
#index ul.thumbs li img {
width: 298px;
}
#index ul.thumbs li.li_4, #index ul.thumbs li.li_7 {
clear: both;
}
#index ul.thumbs li.li_3, #index ul.thumbs li.li_6 {
margin-right: 0;
}..but things still aren’t working out. Any other ideas? Thanks very much for your help.
August 31, 2012 at 11:29 am #108820chrisburtonParticipant@craigmurray Remove this entire thing
#index ul.thumbs li.li_5,
#index ul.thumbs li.li_9,
#index ul.thumbs li.li_13,
#index ul.thumbs li.li_17,
#index ul.thumbs li.li_21,
#index ul.thumbs li.li_25,
#index ul.thumbs li.li_29 {
clear: both;
}Then remove this
#index ul.thumbs li.li_4 {
margin: 0;
}Result: http://grab.by/fM66
September 3, 2012 at 6:30 pm #109123craigmurrayMemberThx ChristopherBurton. I just realized I don;t have access to that code base since it’s part of the CMS theme. I can however override it. But I’ve never overridden CSS. Is there an equivalent CSS snippet I can use to override the things you asked me to remove?
September 3, 2012 at 6:31 pm #109124chrisburtonParticipant@craigmurray What? You can’t edit the CSS?
September 3, 2012 at 6:36 pm #109125craigmurrayMemberCorrect. I can only ‘override’ the current page template.
September 3, 2012 at 6:48 pm #109121chrisburtonParticipant@craigmurray What CMS are you using?
Try this and see if it works
#index ul.thumbs li.li_5,
#index ul.thumbs li.li_9,
#index ul.thumbs li.li_13,
#index ul.thumbs li.li_17,
#index ul.thumbs li.li_21,
#index ul.thumbs li.li_25,
#index ul.thumbs li.li_29 {
clear: none;
}
#index ul.thumbs li.li_4 {
margin: ; /* Set the margin you have for the rest of the images */
}September 4, 2012 at 3:47 pm #109016craigmurrayMemberI’m using Virb. I placed the code you listed here to hopefully override things and get the result i’m after, but it’s not working :( http://craigmurray.virb.com/work
September 4, 2012 at 4:19 pm #108996Kitty GiraudelParticipantWhat kind of CMS doesn’t allow users to edit CSS ? :s
September 4, 2012 at 4:24 pm #108998chrisburtonParticipantSomething isn’t right here is what I’m thinking. If you already created that stuff in CSS to begin with, why can’t you edit it?
September 4, 2012 at 4:28 pm #108999craigmurrayMember@HugoGiraudel I’m not sure.
@ChristopherBurton I didn’t create the page from scratch, just simply wanting to tweak parameters to achieve the 3 column look on this index.
September 4, 2012 at 4:37 pm #108990chrisburtonParticipantOn Virb it says this:
Advanced Customization
Just a click on the Customize panel’s “Advanced” tab and you’ll have direct access to the raw HTML and CSS of your site — the perfect sandbox for tinkering around. Let your imagination run wild.
September 4, 2012 at 5:27 pm #108995craigmurrayMemberThat’s actually an outdated description for what the panel used to be capable of (before the recent redesign they launched). Now, it appears I can only override current page styles or edit the master CSS file (which doesn’t have what I need for the index page) :-
September 4, 2012 at 5:31 pm #108987chrisburtonParticipantCan you see the media queries section or no?
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.