Header Image, Padding, Footer Color

  • Author
    Posts
  • #149195

    A couple of questions, not sure if we need to separate them. Thank you for your help in advance!

    1. Overall we would like to have less spacing/padding between slideshow/top image banners and content block and in between content blocks as well. Not sure about what the full code needs to be for this.

    2. A few months ago you helped our colleague with some coding to make the images responsive (at our own risk). Unfortunately, it doesn’t do the trick. On desktop you have a rectangular container that does not seem to be responsive and our pics are adapted to that. When showing up on a smaller surface, the container of the header should (together with the image) get smaller as well in both width as height. Is there any way for us to make sure this happens?

    3. Footer
    A. Is it possible to make the footer less heigh? Or does it adapt to its content?
    B. Can we change the footer color (sorry didn’t find this)?
    C. Is it easy to add an image here?

    4. How can we make sure the links in the social menu open up in a new tab? Couldn’t find a way to add target= blank.

    5. Is it possible to not show the title “Ambitious People” on the home page?

    The blog I need help with is ambitiouspeoplegroup.com.

    #149201

    tarasdashkevych
    Theme Author

    Hello,

    “Overall we would like to have less spacing/padding between slideshow/top image banners and content block and in between content blocks as well.”
    – Please use this custom CSS:

    
    #primary-header {
      margin-bottom: 30px;
    }
    
    #primary-header .primary-hentry-inner {
      padding-bottom: 15px;
    }
    

    Note, some parts of this custom CSS might stop working in the future once we are done with a refactoring of the theme. So, feel free to open a new thread in this forum, so I can provide you a better solution.

    “On desktop you have a rectangular container that does not seem to be responsive and our pics are adapted to that…”
    – The width of the page header section is dynamic. It depends on the width of the screen.

    The height of the page header has a fixed height (35em). You can try to use viewport units to make it more flexible:

    
    #primary-header {
      height: 60vh;
    }
    

    In this case, the height of the page header section will equal to 60% of the height of the screen.

    Alternatively, you can change the height of the page header is smaller views using CSS media queries. Here is an example:

    
    /* On screens that are 500px wide or less, go from four columns to two columns */
    @media screen and (max-width: 500px) {
      #primary-header {
        height: 30vh;
      }
    }
    

    We might include this solution in the future theme releases once we are done with a refactoring of the theme to improve its performance and accessibility.

    “Is it possible to make the footer less heigh? Or does it adapt to its content?”
    – The height of the footer area is based on its content.

    Moreover, do you have any widgets in your footer widget area? Currently, your footer area does not show any widgets but HTML markup shows the footer widget container. It also adds some additional spacing to the footer area (empty widget container).

    “Can we change the footer color (sorry didn’t find this)?”
    – Please use this custom CSS to change the footer colors:

    
    .site-footer {
      background-color: #000000;
      color: #ffffff;
    }
    

    “Is it easy to add an image here?”
    – You can use the Image Widget (https://en.support.wordpress.com/widgets/image-widget/) or the Text Widget (https://en.support.wordpress.com/widgets/text-widget/) to add an image to your footer widget area.

    “How can we make sure the links in the social menu open up in a new tab? Couldn’t find a way to add target= blank.”
    – Make sure the Link Target option is enabled on your site. Please see this documentation page: https://en.support.wordpress.com/advanced-menu-settings/

    “Is it possible to not show the title “Ambitious People” on the home page?”
    – Please use this custom CSS to hide the page title on your static front page:

    
    .home h1.entry-title {
      display: none;
    }
    

    Hope this helps. Let me know if you have additional questions.

    Thank you,
    Taras

    #149220

    Thank you so much for your help, it is amazing how fast you respond. All these answers really made a difference.

    #149228

    tarasdashkevych
    Theme Author

    You are very welcome :) I am glad I was able to help.

    All the best,
    Taras

The topic ‘Header Image, Padding, Footer Color’ is closed to new replies.