Lodestar front page panels content size adjustment

rodrilau · Member · Apr 15, 2017 at 5:54 pm
Copy link

Add topic to favorites
Hi,

I am using Lodestar and I want to increase the size of the content in the front page panels. It appears that the content is being shrinked.

Best,
Laura

The blog I need help with is: (visible only to logged in users)
dcoleonline · Staff · Apr 17, 2017 at 8:25 pm
Copy link
Hi Laura,

Could you provide a few more details on what you’re wanting to change?

For instance, are you wanting the images in the gallery within your to appear larger?
Are you wanting the fonts larger, or possibly the images below your large main image?
rodrilau · Member · Apr 17, 2017 at 8:28 pm
Copy link
I want both the font above the gallery and images in the gallery to be bigger.
dcoleonline · Staff · Apr 17, 2017 at 8:58 pm
Copy link
Sure thing. Here’s some code to help with those changes:
```
/*Home H2 Font Size*/

.home .entry-header h2 {
    font-size: 30px;
}
/*Home H5 Font Size*/

.home .entry-content h5 {
    font-size: 14px;
}
/*Remove Padding From One Column Panels*/

.one-column .panel-content .entry-content {
    padding-left: 0;
    padding-right: 0;
}
```
The last bit which removes the padding allows there to be more horizontal space for your content. So the gallery will expand to fill that space since the padding is being removed.

Feel free to adjust the font sizes to your liking.
rodrilau · Member · Apr 17, 2017 at 9:06 pm
Copy link
Thanks, that worked great.
rodrilau · Member · Apr 17, 2017 at 9:07 pm
Copy link
Actually, could you help me with one more thing? I would like to center the Contact and Social Icons in the footer in line with the pink logo.
dcoleonline · Staff · Apr 17, 2017 at 11:05 pm
Copy link
Sure, if you won’t need to display footer widgets side by side, you can use this to make all of your widget areas span the width of the site:
```
/*Set footer widgets width*/

@media screen and (min-width: 60em) {
    .site-footer .widget-column {
        margin-right: 0;
        width: 100%;
    }
}
```
This will stack them on top of each other, and they’ll be centered in the middle of the footer, with footer 1 at the top.
rodrilau · Member · Apr 18, 2017 at 3:22 pm
Copy link
Sorry, I wasn’t clear. I want to display the footer widgets side by side but I want them to be in line to the center of the pink logo image in the horizontal direction.

Thanks.
dcoleonline · Staff · Apr 18, 2017 at 3:43 pm
Copy link
Ok, this adds margin to the top of the first and last footer widget areas to push them down a little and make things line up horizontally:
```
/*Add Top Margin To First and Third Widget Areas*/

@media screen and (min-width: 60em) {
    .site-footer .widget-column:first-of-type, .site-footer .widget-column:nth-of-type(3) {
        margin-top: 70px;
    }
}
```
Feel free to change the 70px up or down to your liking.
rodrilau · Member · Apr 18, 2017 at 3:51 pm
Copy link
Thanks that worked great. Also one final thing, I want to remove all the page headers (about, details, etc) that automatically appear on each page, if you are able to help me out with that.
dcoleonline · Staff · Apr 18, 2017 at 6:57 pm
Copy link
Sure thing. Here’s some CSS to remove those page titles:
```
/*Hide Titles on Pages*/

.page .entry-header {
    display: none;
}
```
Let me know if that’s not what you were after.
rodrilau · Member · Apr 18, 2017 at 8:47 pm
Copy link
That worked great. Thanks for all your help I really appreciate it.
dcoleonline · Staff · Apr 18, 2017 at 10:45 pm
Copy link
You bet. If you need anything later, feel free to open a new thread.

No items found.