Highlighted

Centering

Community Beginner ,
Apr 03, 2018

Copy link to clipboard

Copied

Hello, this is probably are really simple question, but I cant for the life of me figure out how to center this specific thing in my website. Ive tried going into the CSS styles and choosing text-center, but nothing seems to do it, its really annoying.

This is my site: theosparks.co.uk

in the 'Me' section, the heading just does not want to center, any ideas? The same thing happens with the 'around the web' section at the bottom, the links are not centred and they are aligned to the left. How do I fix these issues?

Any suggestions would be much appreciated, thank you,

Theo.

theos71901143  wrote

Sorry, I cant figure out where to put the css selectors? Thank you.

Include them at the end of your freelancer.css file.

.footer {

background-color: #2b3e51;

padding: 50px 0;

}

.list-inline {

text-align: center;

}

Views

450

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Centering

Community Beginner ,
Apr 03, 2018

Copy link to clipboard

Copied

Hello, this is probably are really simple question, but I cant for the life of me figure out how to center this specific thing in my website. Ive tried going into the CSS styles and choosing text-center, but nothing seems to do it, its really annoying.

This is my site: theosparks.co.uk

in the 'Me' section, the heading just does not want to center, any ideas? The same thing happens with the 'around the web' section at the bottom, the links are not centred and they are aligned to the left. How do I fix these issues?

Any suggestions would be much appreciated, thank you,

Theo.

theos71901143  wrote

Sorry, I cant figure out where to put the css selectors? Thank you.

Include them at the end of your freelancer.css file.

.footer {

background-color: #2b3e51;

padding: 50px 0;

}

.list-inline {

text-align: center;

}

Views

451

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Apr 03, 2018 0
Mentor ,
Apr 03, 2018

Copy link to clipboard

Copied

Hi Theos,

Despite the coding errors on your page, the headings still seem to center, but the overall problem is that you are not a coder, yet you are using Bootstrap to lay out your page. You have several tag errors, which will cause various levels of problems in different browsers. Bootstrap is a fumy thing. It really should not be used unless you understand the code and how it works, but then f you do understand it, and still use it, then you have other issues which I won't really get into here.

The best suggestion I can give you is to use Chrome developer tools (press F12 in Chrome) and locate the code errors. Fix them, then see if the page behaves closer to what you would like.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 03, 2018 0
Adobe Community Professional ,
Apr 03, 2018

Copy link to clipboard

Copied

The ME heading looks centered to me.  Which browser are you using? 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 03, 2018 0
Community Beginner ,
Apr 03, 2018

Copy link to clipboard

Copied

sorry, not the 'me' heading, its the part where it says animator/explorer, any ideas on how to fix it?

Yeah I want to learn more about coding, just doing this thing has sparked my interest in the skill, I will hopefully be taking some kind of IT course in the future, but for now I just want this website to run nicely.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 03, 2018 0
Community Beginner ,
Apr 03, 2018

Copy link to clipboard

Copied

Look just above your last update

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 03, 2018 0
Community Beginner ,
Apr 03, 2018

Copy link to clipboard

Copied

thanks nancy, will try it out in a bit, just having my tea

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 03, 2018 0
Adobe Community Professional ,
Apr 03, 2018

Copy link to clipboard

Copied

You still have over 170 code validation errors that need attention.  Code errors cause rendering problems in some browsers more than others.  Endeavor to work with clean code and you'll have fewer problems.

Showing results for http://theosparks.co.uk/ - Nu Html Checker

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 03, 2018 0
Community Beginner ,
Apr 03, 2018

Copy link to clipboard

Copied

element {

}

In your CSS

.about_me h3 {

    display: inline-block;

if you remove the display: inline-block your header will display centered.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 03, 2018 1
Community Beginner ,
Apr 03, 2018

Copy link to clipboard

Copied

Thank you Nancy, that did he trick

Do you know whats wrong with my links at the bottom? for some reason their still not centred.

When thats done, that will be all I need to fix my site

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 03, 2018 0
Adobe Community Professional ,
Apr 03, 2018

Copy link to clipboard

Copied

If you mean the social media icons in your footer, they look centered to me.

theos71901143  wrote

When that's done, that will be all I need to fix my site

No.  You must also fix the code errors and do something about page performance because it's slower than a sloth.

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 03, 2018 0
LEGEND ,
Apr 04, 2018

Copy link to clipboard

Copied

theos71901143  wrote

Thank you Nancy, that did he trick

Do you know whats wrong with my links at the bottom? for some reason their still not centred.

When thats done, that will be all I need to fix my site

There is no need for all those redundant containers in your footer html code. All you need is a simple structure as below:

<!-- Footer -->

<footer class="footer">

<h3>Around the Web</h3>

<ul class="list-inline">

<li>

<a href="http://theosphonedoodles.tumblr.com/" target="new" class="btn-social btn-outline"><i class="fa fa-fw fa-tumblr"></i></a>

</li>

<li>

<a href="https://twitter.com/theo1231231" target="new" class="btn-social btn-outline"><i class="fa fa-fw fa-twitter"></i></a>

</li>

<li>

<a href="https://vimeo.com/user14724352" target="new" class="btn-social btn-outline"><i class="fa fa-fw fa-vimeo"></i></a> 

</li>

<li>

<a href="https://www.facebook.com/Theosanimations/" target="new" class="btn-social btn-outline"><i class="fa fa-fw fa-facebook"></i></a>

</li>

<li>

<a href="https://www.youtube.com/channel/UCIduYBO6MroCtfNMzeEjHDg" target="new" class="btn-social btn-outline"><i class="fa fa-fw fa-youtube"></i></a>

</li>

</ul>

</footer>

Plus a couple of css selectors:

.footer {

background-color: #2b3e51;

padding: 50px 0;

}

.list-inline {

text-align: center;

}

So find the code below in your current page and replace it with the above html code and include the css selectors, then your social media icons will be perfectly centered.

<!-- Footer -->

   <footer class="text-center">

   <div class="footer-above">

   <div class="container">

   <div class="row">

   <div class="footer-col col-md-4">

   <h3> </h3>

   </div>

   <div class="footer-col col-md-4">

   <h3>Around the Web</h3>

   <ul class="list-inline">

   <li>

   <a href="http://theosphonedoodles.tumblr.com/" target="new" class="btn-social btn-outline"><i class="fa fa-fw fa-tumblr"></i></a>

   </li>

   <li>

   <a href="https://twitter.com/theo1231231" target="new" class="btn-social btn-outline"><i class="fa fa-fw fa-twitter"></i></a>

   </li>

   <li>

   <a href="https://vimeo.com/user14724352" target="new" class="btn-social btn-outline"><i class="fa fa-fw fa-vimeo"></i></a> 

   </li>

   <li>

   <a href="https://www.facebook.com/Theosanimations/" target="new" class="btn-social btn-outline"><i class="fa fa-fw fa-facebook"></i></a>

   </li>

   <li>

   <a href="https://www.youtube.com/channel/UCIduYBO6MroCtfNMzeEjHDg" target="new" class="btn-social btn-outline"><i class="fa fa-fw fa-youtube"></i></a>

   </li>

   </ul>

   </div>

   </div>

   </div>

   </div>

   <div class="footer-below">

   <div class="container">

   <div class="row"></div>

   </div>

   </div>

   </footer>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 04, 2018 0
Community Beginner ,
Apr 04, 2018

Copy link to clipboard

Copied

Sorry, I cant figure out where to put the css selectors? Thank you.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 04, 2018 0
LEGEND ,
Apr 04, 2018

Copy link to clipboard

Copied

theos71901143  wrote

Sorry, I cant figure out where to put the css selectors? Thank you.

Include them at the end of your freelancer.css file.

.footer {

background-color: #2b3e51;

padding: 50px 0;

}

.list-inline {

text-align: center;

}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 04, 2018 0