I am trying to style a site, how do I center a button?

I would like to center the buttons on this website, click here,.

I am not certain what am I not doing right.

Also, if you can help me take care of the space that's between the top image and the "about" section it would be awesome. :slight_frown:)

  • Michael Bissett

    Hey @Julius, hope you're doing well this evening! :slight_smile:

    In regards to those buttons, you should be able to resolve that with this CSS code:

    .home a#profile {
        width: 62px;
        display: block;
    }

    Regarding this:

    Also, if you can help me take care of the space that's between the top image and the "about" section it would be awesome. :slight_frown:)

    Give this CSS code a shot:

    @media only screen and (min-width: 768px) {
    
    .home .vc_custom_1438202528529 .vc_col-sm-6 {
      width: 45%;
    }
    
    .home .vc_custom_1438206605910 .vc_single_image-wrapper.vc_box_border_grey {
        text-align: right;
        display: block;
    }
    
    }

    Hope this helps! :slight_smile:

    Kind Regards,
    Michael

  • Michael Bissett

    Hey @Julius, glad that you're really liking it here! :smiley:

    In regards to that 2nd code snippet I shared earlier, you'll want to change that to this:

    @media only screen and (min-width: 768px) {
    
    .home .vc_custom_1438202528529 .vc_col-sm-6 {
      width: 45%;
    }
    
    .home .vc_custom_1438206605910 .vc_single_image-wrapper.vc_box_border_grey {
        text-align: right;
        display: block;
    }
    
    .homepage_left.vc_custom_1438206605910 {
      padding-left: 0;
    }
    
    }

    That'll remove the padding of the left side of that image of yours, and make things look nicer. :slight_smile:

    Now, in regards to this:

    Look at the Meet Our Attorney section of the site, the one - two sentence bio is too small on a smaller screen. PLEASEEEEEE HELP

    We can insert this CSS code into that 2nd code snippet of mine:

    .home .vc_custom_1438207476714 .team-member {
      padding: 15px 0 0;
      max-width: 250px;
      margin: 5px auto 0;
    }

    So that it all looks like this:

    @media only screen and (min-width: 768px) {
    
    .home .vc_custom_1438202528529 .vc_col-sm-6 {
      width: 45%;
    }
    
    .home .vc_custom_1438206605910 .vc_single_image-wrapper.vc_box_border_grey {
        text-align: right;
        display: block;
    }
    
    .homepage_left.vc_custom_1438206605910 {
      padding-left: 0;
    }
    
    .home .vc_custom_1438207476714 .team-member {
      padding: 15px 0 0;
      max-width: 250px;
      margin: 5px auto 0;
    }
    
    }

    How's that lookin? :slight_smile:

    Please advise,
    Michael

  • Michael Bissett

    Hey @Julius,

    Time, practice, and having the right resources to learn from really helps. :slight_smile:

    One resource that's been helpful in the past would be this:

    https://www.codecademy.com/

    I'm also reminded of this article of ours (I've referred to css-tricks.com, one of the sites mentioned there, on more than one occasion):

    https://premium.wpmudev.org/blog/35-resources-for-kick-ass-wordpress-developers/

    Hope this helps! :smiley:

    Kind Regards,
    Michael

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.