• 0
Sign in to follow this  
Followers 0

Diminish size of sections on page separate from page/contentwidth

Question

Posted · Report post

Hi, I've did a lot of searching with Firebug to find the CSS attributes with whom I could change the following: On the website www.janpeeters.nl I want to reposition some parts and diminish some. 1) I'm using the 'Special Recent Posts PRO' plugin on the homepage (in postloop) to show the three latest posts. At the moment I've only got one post ;-). I find the width of this section too wide for the textlines to be readable. So I would like to diminish the width from the right side so that I have apprx. the same amount of white left as right. Does anyone know with CSS attribute I need for that? I've found content-pads but when I change them in Firebug preview or enter them in my base theme style.css nothing happens. 2) Besides that I want the same (though not so much space) for the boxes above. I think they are just a bit too much to the side so I want to make them a bit smaller too. 3) I want to slide the site title and site description a bit more onto the page. Maybe I'm missing something very functional in the way Framework is build up. Is there maybe a graphic or so that explains what all the CSS selectors are for certain sections (with padding and all)? Thanks for all the help again ;-) Jan

Share this post


Link to post
Share on other sites

9 answers to this question

  • 0

Posted · Report post

1) Can you please post the CSS you tried for making this adjustment? 2) By smaller. do you just want the width to be decreased (no height adjustment)? 3) Add this CSS to move the title and description down a bit: [code]div.title-container {margin-top: 50px;}[/code] ^ Adjust the value (50) if you want to move it down or up further. There isn't a graphic made, but practicing with Firebug is a good way to find the selectors you need.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Catrina, You're right about Firebug that it's a good way to learn, I'm doing that most of the time, but with this I can find a solution, sorry. regarding 1) I've tried [code]div.entry-content { margin-right: 50px }[/code] and [code]div.entry-wrap { margin-right: 50px }[/code] But nothing happens. I also worried that this (if it worked) might change this for all pages and I want it for only the front page. So I guessed I have to add #post-31 before the selectors? 2) Yes only width 3) Your suggestion for the title-container doesn't do anything overhere. Maybe something overrules it but I can't find what. I've noticed with Firebug that sometimes you can change something and it changes right on the page, but when I add it to style.css nothing happens. Have you experienced this behaviour? Thanks for your help and time, Jan

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Jan, I'm going to deal with these one at a time, if you don't mind. As I understand point 1, you want to make the excerpt width appear to have even amounts of white space on either the left or right side. To achieve this, try adding the following to your Custom Code > CSS Rules: [code]p.srp-widget-excerpt { margin-right: 70px; margin-top: 0; }[/code] You may need to adjust the 70px width. I'm doing this by eye. You might want to try a more exact means of measuring it. That code will ONLY affect the excerpts in Special Recent Posts. It won't change the title or anything else.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

For point 2, I see there's an empty div for a sidebar left of the box area. You may need to check the box in Dashboard > PageLines > Settings > Website Setup for Hiding Sidebars when empty under: Remove Default Sidebars When Empty. The empty div will vanish. Then, margin left and right will work for the boxes container.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

2. This worked in Firebug, but it's with the empty sidebar div present: [code].mcolumn-pad > *:first-child, .copy-pad > *:first-child, .scolumn-pad > *:first-child, .sidebar_widgets > *:first-child { margin-right: 30px; margin-top: 0; }[/code] I did not inspect other parts of the site with that, and it might have impact outside the front page.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

With item 3, I see you may have had some success with this: [code]div.title-container { margin-top: 50px; }[/code] If not, then change the 50px to a bigger or lesser number as you see fit.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Rangelone, thanks, I'm having a busy week so no time to check it out, but I will next week. Thanks in advance for all your suggestions. Best, Jan

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Let us know how the solution works out

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Rangelone, 1+2) I've tried your suggestion regarding the SRP Pro widget. Your suggestion works perfectly well, but in case of long titles it wouldn't work as you already mentioned because it works only on excerpt. What I've never understood but starting to grasp is that you have to apply a margin on more then one selector to really change something. That's probably because they're nested in each other? Also the > trick I'd never seen. After researching that on the web it became a bit clearer. So to summarize the solution. - I changed the layout to full-width. 'Hide empty sidebars' in Pagelines settings didn't do anything. Maybe because I'm using the Visual widget logic plugin? But I didn't research that further. - When looking at the design I decides that I can better make the SRP widget even less wide to improve readability. I used the Visual Composer plugin (great addition for Pagelines btw, maybe one day included) to divide the main content in 2/3+1/3. I used the 1/3 for news. - Still I had to create a large space left to approach my initial design. That I initially did with the empty sidebar. I used the following code to do that (I've made it in percentages to keep the site responsive for mobiles) [code].fullwidth #column-main .mcolumn-pad { margin-left: 9%; margin-right: 1%; } [/code] This code that you posted above changes the right margin on all pages in every sidebar so is a bit too drastic ;-) [code].mcolumn-pad > *:first-child, .copy-pad > *:first-child, .scolumn-pad > *:first-child, .sidebar_widgets > *:first-child { margin-right: 30px; margin-top: 0; }[/code] But it was interesting to see you use the > sign. I wasn't aware of this function in CSS so I learned a bit! 3) Moving the title worked, but I didn't want it to go down, just to the right. So it had to be a margin-left. Thanks again for all your help, also Catrina. Great to have a place where you can learn in this way. Jan

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0