[Resolved] Section Side Paddings

[Adrian Cojocariu]

You placed options for top and bottom paddings in the sections menu, but not for the sides.

Your homepage has a section with background images already darker, but instead I’m using a div with text background color black and opacity rgba(0,0,0,0.6).

I can put margins left right -40px in the div itself to get the effect, but I think it will interfere with the responsive thing.

How can I change the left right padding for each section separately ? Withough giving a global effect ?

Also, I would like some margins inside the div, I’d have to code that as well.

Here’s the thing : There’s also the Element Spacing Add-on, and I can change most things, but on the blog page, and more like global effect. I want my homepage a static one, with sections, so are there any spacing options for the sections…section, that I am missing ?

[Tom]

Hi there,

I wanted to reduce the amount of options in each section (makes it save faster etc..).

Currently, the Sections take the left and right padding from the Element Spacing setting (default 40px).

To change this for specific sections, add a custom class to the section – for example: unique-section-class

Then you could do this:

.unique-section-class .generate-sections-inside-container {
      padding-left: 0;
      padding-right;
}

To make this change only on desktop (not mobile), you can do this:

@media (min-width: 769px) {
      .unique-section-class .generate-sections-inside-container {
            padding-left: 0;
            padding-right;
      }
}

Let me know if you need more info 🙂

[Adrian Cojocariu]

Ok I’ll try that asap 🙂 You’re right, too many options could ruin it. But there are sooo many that could be added 😀 I’ll post onto the suggestions page. Btw I forgot to tell you what an awesome job you did ! Thx

[Tom]

Glad you’re enjoying it! Hopefully the Custom Classes field will be able to help a lot of people customize their sections further without bloating the options in the editor 🙂

[Adrian Cojocariu]

Ok thanks, now I know how to use the custom CSS and it’s gonna be cool.

Can I add more custom class to one section ? Like unique-section-class, unique-section-class2, unique-section-class3 etc ?

I’m trying to replicate the Div code you have on your homepage the code is :

/*

*/

You have two of these but when I set the Section Box Type or Inner Box Type to Fluid, it bugs out and the background parallax behind doesn’t show well anymore. I fixed it though by using Contained and removing the paddings with custom CSS

[Tom]

Seems your code got stripped?

You can have as many classes as you want – just be sure to separate them with nothing but a space.

Can you link me to your page so I can see the issue you’re talking about?

[Adrian Cojocariu]

Omg Imna bother you 😛 This is a long post.

What do you mean my code got stripped ?

This is the link http://www.4psiho.ro

I kinda fixed it, but now I’m having a mobile issue, I’m thinking that the width of the image is just too big and it only shows a part of it, the left side to be exact. If I zoom in on the PC, the image stays centered at about 175%, and it repeats from top to bottom, but at 200% and above it just shows one zoomed in part of the image. I think it’s just too big ? Should I try different resolutions ? I already resized it to about 50% of what it was. Maybe it’s too small lol.

So on your homepage you use a darkened image with lighter text on it. I want my image bright, so I decided instead to use a background-color with opacity in the CSS. Problem is if I don’t set min-height it bugs out, and looks like this :

http://oi57.tinypic.com/2d0mkjr.jpg

It’s strange …

I used @media couse I didn’t want it also on mobile, but it’s not an option.

BTW If I remove the text Divs, the mobile version shows the whole image, centered, full resolution, and looks smooth. But as soon as I place text and get it to about 300px in heght, it shows like that, because it stacks elements on over another.

This is the CSS I used

/* .unique-section-class .generate-sections-inside-container {
background-color: rgba(0,0,0,0.25);
text-align: center;

}

@media {
.unique-section-class .generate-sections-inside-container {
min-height:300px;
}
*/

So basically I want about 2 divs in that section, but to be aligned center both horizontally and vertically. With the horizontal position, the text-align did the trick, but for vertical, vertical-align doesn’t seem to work so I’ll just use padding, as you did.

This is the code I stole from your homepage.

/*
<>(I put them like this because otherwise the page would take them as code)div class=”grid-50 home-info”<>
<h1>Free WordPress Theme</h1>
<h3>Simple, Lightweight & Fast</h3>
<p style=”text-align: center; margin-bottom: 15px;”>Add-ons Download Demo</p>
<h3 style=”font-weight: 100; font-size: 35px; text-align: center; margin-bottom: 0;”><span id=”totaldownloads” style=”font-weight: bold;”>182,000</span>+</h3>
<>div class=”downloads”>Downloads!<>/div<>
<>/div<>
*/

Did you just code this, or did you use some sort of plugin to create it/ arrange it in the section ?

In this video you stack them one over another, https://www.youtube.com/watch?t=134&v=Y-GETbBhxaw but now the are in 50% width divs. I guess that’s what class grid-50 means.

[Tom]

Hi there,

Background images are a pain when it comes to different screen sizes – this is just the way the HTML/CSS works.

What you can do is set a different background image on mobile using media queries.

For example:

@media (max-width:768px) {
      #generate-section-1.unique-section-class {
            background-image: url(URL TO MOBILE IMAGE);
      }
}

In my case, I used an image which looks good on either resolution, but it’s a bit tougher when trying to display an actual image like you are.

I coded that block myself using the built in unsemantic grid (http://unsemantic.com/).

Vertical align unfortunately only works on tables and hacky display: inline-block elements – this is why I use padding.

Also, putting CSS between those stars and slashes will ignore the CSS – it comments them out, so be sure to remove those (/* */).

I’m mostly out of office today, but will check in with you as soon as I get home.

Hopefully this is enough for you to make some progress 🙂

[Adrian Cojocariu]

Hey, thanks for that 🙂

I’m now struggling with something else…

I’m trying to add the blog masonry under that section, in another section … but from what I’ve read from other posts it looks impossible. I’ve tried to put a plugin with a shortcode but it looks rather lame, only a list of links with posts, I actually want the masonry, generating new posts as you scroll down.

Can I add the blogroll masonry in a section of a static page ? Or can I instead add a section above the blogroll, so that I have the image there ?

Also, I’ve read that many people want to disable the featured image on a single post. You considered then making this an active option in the theme. While it may be true, I think it would be nice if the single post featured image could be placed on the left/right side of the title, instead of above or below it.

If you can tell me how to do this ? I’d like 😀 Featured image on the left side of title for single post.

[Tom]

You would have to rely on a plugin to use a shortcode to display posts in a masonry grid – I’ve been building a shortcode display posts plugin in my spare time, but there’s no timetable on when that will be done.

As for floating your featured image, this may help: http://generatepress.com/forums/topic/customising-featured-image/#post-83209

[Adrian Cojocariu]

Ok it worked 😀

But I had to place the mobile background at the beginning of the Custom CSS, otherwise it wouldn’t work.

@media (max-width:768px) {
#generate-section-1.unique-section-class {
background-image:url(http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg);
}
}

.unique-section-class .generate-sections-inside-container {
background-color: rgba(0,0,0,0.4);
text-align: center;
}
@media {
.unique-section-class .generate-sections-inside-container{
min-height:300px;
}

Can I mix all those together in a single @media or should I leave them as they are ?

Also, on your homepage you used some small icons in some divs, the ones under the video.

This is the code, I was wondering, how did you got the little icons to show if there’s no image url 😀 ? Is it in the custom CSS and you used class ?

<h4><i class="fa fa-flash" style="color: #1e72bd; font-size: 20px; padding-right: 5px;"></i> Lightweight & Fast</h4>
<p>GeneratePress doesn’t try and do too much. The core theme only includes the bare essentials, and focuses on speed, search engine optimization and usability.</p>

[Tom]

Glad you got it working!

Those two @media calls are different, so I wouldn’t put them together.

@media alone isn’t necessary – you can remove it.

@media (max-width:768px) targets mobile phones.

@media (min-width: 769px) targets larger screens.

As the icons on my homepage, I’m using Font Awesome, which is built into the theme: http://fortawesome.github.io/Font-Awesome/

[Adrian Cojocariu]

Okey dokey 😀 thx man, I’ll post new questions on separate topics so you can share them if they reoccur

[Tom]

Thanks!

[Author]

Posts