The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS aligning a heading, an image and troubleshooting a bootstrap carousel

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #204111

    Here is the reference template I am working with:
    Here is my test case:

    Here are my questions for now:

    I figured out how to center align the h1 elements in the CSS, but I can figure out how to center align the green underline image (heading.png). I figure I need to add a property to the .heading class and h1 element in the style.css (lines 202-207) or probably more accurately within the declaration in the @media query for 1200px specifically at line 582 but I can’t figure out which property. I Googled h1 properties which returned some docs on w3schools which says that an align: center declaration is no longer valid in html5 but I tried adding it anyways (why not?) which ended up not doing what I had hoped. I was advised not to use w3schools anyways and instead try using So quired for ‘h1 properties’ which didn’t turn up anything relevant to what I was looking for.

    Why at larger resolutions does the 8th and final image (lines 231-245 in index.html) below the comparative mythology heading (“latest-work” class between lines 101-248 in the markup) not align properly like its brother and sister images? I figure I have an open or unclosed divider, but I can’t pinpoint where. Depending on the resolution, only sometimes it aligns as intended.

    At “THE APPEAL TO SUBGENIUS ACTIVISTS EVERYWHERE” heading (“creative-process” class) the carousel content doesn’t scroll when you click on the indicator buttons. This markup is essentially a duplicate of the markup from above (the “MORE RESEARCH” heading – – also a “creative-process” class). Again, I suspect it could be an unclosed divider. What would you folks suggest?

    I have more questions but I’d thought I’d resolve these 3 first.

    Please advise.

    Thanks for you attention.


    The answer to question one: commenting out ‘background-position: left bottom’ within the ‘.heading img’ rule beneath the min-width:992px fixed it.

    The answer to question two is that 3.jpg was a few pixels too wide. The aspect ratio wasn’t perfect. So I cropped the image to the 1:1 ratio and presto it works.

    Now I am still working on my answer to question three.


    In my follow up post there I answered my initial two questions. I have just answered my third question. The solution was to copy all the CSS rules with “creative-” elements, duplicate them but replace the ‘creative-‘ elements with ‘appeal-*’. I then modified the corresponding class names in the my HTML. Now both the creative and appeal carousels scroll perfectly. I am not sure why this works, I just know that it does.

    Here is my working testcase with a few further content and form changes and updates:

    I have two final questions which I am asking for clarification now:

    Where in my CSS could I specify an increase in the padding between “THE APPEAL TO SUBGENIUS EVANGELICALS” heading (the thick green png line) and the indicator buttons? The spacing is actually quite nice at narrower resolutions, but when the window is maximized, there really isn’t enough padding.

    Here is the heading class element:
    padding: 60px 60px;
    .heading h1{
    background: url(img/heading.png) no-repeat;
    background-position: center bottom;
    padding: 0 0 60px 0;

    I tried many value combinations for both of these padding properties which didn’t get me any closer to where I am trying to go.

    My next question is also about padding, just for the appearance of padding in a different location in my markup:

    Where in the CSS could I specify an increase in the padding between the “FLAGSHIP RESEARCH” heading (h1) and the images at both narrower and wider resolutions?

    Thanks for your attention.


    I’m back. I have reproduced issue #4 in a codepen testcase here:

    The issue I am still having is that the padding between the heading (along with the thick green png line) and the indicator buttons is too little. This is only a problem when the window is maximized. When the window is narrowed to scale to the width of a mobile device, the padding is perfect. I tried playing around with the heading class’ padding properties in the CSS. I can’t figure out the right values.

    Here is my webpage again for the entire context of my question:

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.