How To Get Help When You Are Stuck Coding

How To Get Help When You Are Stuck Coding
0

Hi guys! Have a look at my tribute!
I’ve had some trouble getting the img and the quote centered, maybe you can help? :grinning:
I used col-xs-*based grid, and col-xs-offset to move the img, but this does not center it. I tried “block-center”, but this will olnly work with a fixed width…so I’m kinda stuck here! Any input will be appreciated! :slight_smile:
https://codepen.io/prf-farnsworth/pen/OjVPmb

Edit: how do i embed the link, so that this nice codePen window appears? :blush:

You can use the embed button in the bottom right corner of your Codepen Editor View for the link.

Hi man,

To center your img and your quote, just change your col-xs values.

In bootstrap you have 12 columns so if you say your img is col-xs-5 and col-xs-offset-4 then you have a problem : 4 empty colums, 5 for your img and then only 3 left so it’s not centered. To center it, you can try col-xs-6 and offset-3 or col-xs-4 and offset 4 this way your img will be centered :stuck_out_tongue:. Same goes for the quote :wink:

Hope this has been helpful to you, good luck :smiley:

Looks nice man, good job :slight_smile:

Hey. I’m not sure I understand what you’re trying to do since I don’t see any links to the thumbnail images you’re trying to add to the projects page. Anyway I entered a random img and added the class to it.

<img src="http://fcbrewing.com/images/logo.png" class = "thumbnail" alt="fix">

Copy and paste that into your html ln 31 to see how it works then edit away in css maybe…

1 Like

Hey Guys! Have a look at my tribute page…


Pls comment for any suggestions and views

Hi guys,
that s my tribute page, let me know if the job is a pity or sufficient!
Thanks a lothttps://codepen.io/Giu88/pen/Kvwaag

1 Like

Tribute page: Selena :slight_smile:

2 Likes

Hi chvaa,
thanks for the tip! At the time I didn’t know, that bootstrap always uses 12 collumns! Gonna fix it right away! :slight_smile:

Hah! I did mine yesterday also about Arnold !! :grin:

1 Like

Hi there! I am really stuck while trying to edit my first tribute page. Both my h3 element and the photo are to the left. I managed to make borders for the quote, but as soon as i defined the border size with grids it also went to the left.

Thank you so much for your help on how I could solve this and put both elements in the centre of the page.

Hey flrflr,

If you want to center your h3 element and also you img you should try using col-xs-offset property from bootstrap. Because if you define only col-xs-8 your h3 might be centered in the 8 columns when you use the class “text-center” but won’t be centered on the overall page because your col-xs-8 will be on the left (I’m not sure it’s really clear). Since bootstrap is about 12 columns, if you want to use col-xs-8 and want to center the element, try using also the col-xs-offset-2 so your element will be in the center of the page.

For the img you should also work with col-xs-offset and if you are using img-responsive and you see that your image is still not centered in your div, change the css style of .img-responsive to => margin: 0 auto;

I forked your page and modified a little to center everything, feel free to check it out and get some inspiration if you like it :slight_smile: (https://codepen.io/WhatADog/pen/breNRP)

Good luck and I hope it helped :stuck_out_tongue:

Here is my tribute page. https://codepen.io/npardon/full/gxaPer/
feedback would be greatly appreciated especially for JS because I was not sure what I could add to make it more dynamic.
thanks,
Nadia

I put them on facebook and google+

Hey guys! can someone please help me with my portfolio webpage. I have 2 questions.

  1. why is page 2 & 3 color not filling the entire screen? How can i get page 2 and 3 to cover the full screen?

  2. My nav pills(tabs) do not show up in the order that they were written in html I had to re arrange them from About, Portfolio Contact Me to Contact me, Portfolio About to get that order. Why is this?

This is my link: https://codepen.io/Siantdiivca/full/YxGxrY/

I have a question when I solve https://www.freecodecamp.org/challenges/check-for-palindromes
and my code is here :

  function palindrome(str) {
  // Good luck!
  var strArray = [];
  str = str.toLowerCase();
  strArray = str.split("");
  strArray = strArray.filter(function(word){
return (word>='a' && word<='z') || (word >= '0' && word <= '9');
  });
//   return strArray >= '0' && strArray <= '9';
  for(var i = 0; i < strArray.length / 2; i++) {
if(strArray[i] !== strArray[strArray.length - i - 1])
  return false;
  }
  return true;
}

when I use
return (word >= 'a' && word <= 'z') || (word >= 0 && word <= 9);
the space(’ ') dose not filtered. so this is why?

Quick and simple.

Hello!

First of all, thank you for your amazing tribute pages!!! Wow!
I will look at them for having ideas and open mind as I see I am not so original… (snif)

Then… at this moment I’m stuck in a little problem with mine: it’s ok in this page, when I write code on codepen and see the page next to it, wherever I change the size, BUUUUT when I opened it in a notepad, saving it with UTF-8 code and as an htlm element, it’s opened in my navigator (I used chrome) with a different result, why?
I can’t understand, nor find the problem.

In fact, everything is ok but the images:

  • In codepen my page is responsive: it has different images for different sizes, only one each time
  • However, on chrome, it is not! copying and pasting the same code, all the images are visible at the same time, one after the other, and for any size of screen.

Could anybody help me?

I show you this in screencaptures.

Coding here, in freecodecamp page is ok for all sizes:
Small (ok):

Medium (ok):

Large (extra-large) (ok):