Getting some things straighten out.

Shapely
1

Hi,

I’m very happy with the Shapely Theme and I’m currently building a website for my brother-in-law. He started just a month ago his own company so he asked me (because he thought I was some kind of WordPress Guru) to create something. After a few tryouts, Shapely is the one who he feels the most comfortable with.

I have a few questions that I upon till now could not resolve myself.

Underneath you see my current ‘custom CSS’ build into the ‘style.css’ of the Child Theme.

/*--------------------------------------------------------------
# Custom CSS
--------------------------------------------------------------*/

/*--- Custom Font ---*/

@font-face {
    font-family: 'Gotham Light Regular';
    src: url('template-parts/Gotham Light Regular/Gotham Light Regular.otf');
    font-weight: normal;
    font-style: normal;
}

/*--- Remove footer ---*/
.footer .footer-credits {
    display: none;
}

/*--- Center 'Copyright' footer ---*/
.site-info.col-sm-6 {
    width: 100%;
    text-align: center;
}

/*--- Portfolio Home BG & Text Color ---*/
.shapely_home_portfolio .bg-dark,
.shapely_home_portfolio .bg-dark h3,
.shapely_home_portfolio .bg-dark p {
    background: #fff;
    color: #404040;
}

/*--- Portfolio Full Width Page ---*/
body.single-post #main.container {
    width: 100%;
    max-width: 100%;
}
body.page #main.container {
    width: 100%;
    max-width: 100%;
    padding: 0px;
}

.single-jetpack-portfolio #primary {
    width: 100%;
}

/*--- Remove banner above Posts/Pages ---*/
.header-callout {
    display: none;
}

.container.nav-bar {
    width: 100%;
}

In my first attachment I would like to have the 4 footer parts “centered”

The second one show the “Portfolio” page but I cannot get it really full width.

The third one would also be nice in really full width like the fourth picture shows as soon as you go to the blog post itself.

Hopefully I don’t ask to much on my second post :wink:

Thanks in advance!

2

Hey there

I hope you are well today and thank you for your question.

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Additional CSS
1.

/*center widget content*/
.footer-widget-area div.widget.widget_text {
    text-align:center;
}

/*full width portfolio*/
.single-jetpack-portfolio div#main {
    margin: 0 auto;
    width: 100%;
    padding:0 0 0 0;
}
.single-jetpack-portfolio div#primary{
  width: 100%;
    margin: 0 auto;
   padding: 0 0;
}
.single-jetpack-portfolio section.content-area.pt0{
  padding-top:0px;
}
  1. The blog has a fullwidth option: Appearance > Customize > Shapely Option > Blog Setting > Blog Template Fullwidth.

Best Regards,
Support

3

Thanks for your quick reply.

So option 1 works flawlessly, the other 2 I still get the “white” spaces on the left and the right.

4

So I have to deal with the fact, that “Full Width” is not totally Full Width? Could be, but than I have to find a different way of convincing my brother-in-law to accept the white spaces… :slight_smile: