[muziksoulchild]

Hi,

I recently purchased this fantastic theme and have been setting it up for the last couple of days. I recently added a footer to my site which includes 4 of the widgets provided. The footer appears with all the correct widgets but is aligned to the left. Is there a way to center the alignment?

Thanks
Amit

[Mehmet S.]

Can you provide your url?

[muziksoulchild]

Sure: http://wryter.co.uk/

Also, is there any way to decrease the width of the text on the portfolio section (http://wryter.co.uk/portfolio/music-review-terrace-martin-3chordfold/) to match the width of the text on the blog section (http://wryter.co.uk/questionable-intent/) as its much easier to read.

Thanks
Amit

[Mehmet S.]

For portfolio: Use this in the custom css field:

.portfolio-single { max-width: 780px; }

For footer: Use this in the custom css field:

footer { text-align: center; }

[muziksoulchild]

Thanks for this.

The portfolio css code works great but regarding the footer, the code has indeed centered the footer but has also now centered the text within the footer. Is there a way to keep the text left aligned next to its icon but keep the whole footer itself centered?

http://wryter.co.uk/

Thanks
Amit

[blairwarren]

Try adding this in your custom css field:

footer .widget-area {
text-align: left;
}

[muziksoulchild]

I’ve tried this out but it basically brings things back to the original state, everything aligned to the left.

[blairwarren]

Did you leave the original footer change Mehmet suggested and then add the other one? Or did you replace the original change with the other one?

If you used the two rules together, the first one should center the entire footer area and the second should specifically target the text in the widget areas. At least that’s what it’s doing when I test your site on this end. You might have to add the !important attribute to one or both of the rules:

footer {text-align: center!important; }

footer .widget-area {text-align: left!important;}

If using both rules doesn’t work, could you post the contents of your custom css area? Maybe there’s another rule causing problems.

[muziksoulchild]

I left Mehmet’s solution and added yours but the result was like I said. I used the rules again with the !important attribute but no change.

See below for screen grab of the custom css area:
http://extrapixel.co.uk/other/grab.jpg

See below for what I want to achieve, through a quick photoshop mockup I have created:
http://extrapixel.co.uk/other/footer.jpg

[blairwarren]

Have you cleared your browser cache before checking the css changes? When I look at your site right now the footer looks just like the mockup you posted:

http://regularold.com/images/wryterfooter.jpg

Footer is centered aligned on the page and the text within the footer widgets is left-aligned.

[muziksoulchild]

I just tired a different browser (Firefox).

Regarding the jpg you posted, this is how I see things here at my end. What I want to know is can the contents of the footer be evenly distributed across the 1080 width (as my jpg). You can see the meta column butt up right against the edge matching the horizontal line above it.

Let me know of this is possible.

Thanks

[blairwarren]

I’m not sure how you’d do what you’re wanting to do. The right hand widget does, in fact, span to the right edge of the horizontal line above it. But visually it does not because you don’t have enough content in it to span the width of the widget. In the image below I gave the widget areas a background color so you can see where they begin and end on each side. I also added some extra text in the right hand widget so you can see how it looks when the content spans its full width.

http://regularold.com/images/wryterfooter2.jpg

I’m assuming you’d have to set the width of each widget area individually based on the content inside of it. The problem with that is going to be the width of the content is going to vary depending on people’s browser settings.

But I’m afraid I’m out of my league at this point, though. Hopefully Mehmet will be able to come up with a solution. Sorry.

[muziksoulchild]

Thanks alot for your efforts, I know CSS can be frustrating. Probably why I stuck with design lol

I can understand different res/devices can be affected when making changes so Im guessing this was built with the most fluid style in mind. Im guessing changing the footer css now with very specific alignments, may affect everything globally. Although I think it still would have been nice to get this to work.

Out of curiosity what screen res are the grabs you have posted?

[blairwarren]

Yeah, CSS can really be a challenge. Just when I think I have the hang of it, something comes along and bites me in the browser.

As for my screen resolution…mine was/is set to 1440×900. I made the browser window narrower though when I took those screen captures because I wanted to show the rightmost side of the window for reference.

[muziksoulchild]

Ha… I remember those days.

Ok, lets see if Mehmet can help here…

[Mehmet S.]

Hi, use this:

footer.site-footer { text-align: center; }

footer.site-footer .widget-area ul li
{
display: inline-block;
margin-left: 20px;
}

[muziksoulchild]

Hi Mehmet,

I tried the code above and got this result:
http://extrapixel.co.uk/other/footer2.jpg

[muziksoulchild]

So Im guessing its not possible for it to look like this?
http://extrapixel.co.uk/other/footer.jpg

[Mehmet S.]

Hi, it is ok now!

footer.site-footer { text-align: center; }

footer.site-footer .widget-area ul { display: inline-block; }

footer.site-footer .widget-area ul li { text-align: left; }

[muziksoulchild]

This is closest it has gotten… a little bit wider to match the horizontal line and we are there…
http://extrapixel.co.uk/other/footer3.jpg

[ahmetsali]

Hi, try this custom css;

.footer > .row { max-width: 960px;}

[muziksoulchild]

No change … thanks for trying!

[rtparker]

Can someone point me in the right direction. On this page:
http://rekko.com/capture/

I have the 3 column footer layout. I am trying to get text in columns 1 and 3 to vertically align bottom of the icons in column2. I have tried inline CSS to no avail. Help?

[ahmetsali]

try this custom css;

.site-footer .social { margin-top: 0; }
.site-footer .widget_text { margin-top: 20px; }

[rtparker]

Hi Ahmet,

I installed the custom CSS code but don’t believe that it’s done what I intended.
http://cl.ly/image/3V1t1u2l242V

I am trying to get the text in footer 1 and footer 3 to align bottom (where the orange line is).

Thanks!

[ahmetsali]

update the code as;

.site-footer .social { margin-top: -28px; }
.site-footer .widget_text { margin-top: 26px; }

[rtparker]

awesome, slightly adjusted your code but it worked. Thanks!