Support » Fixing WordPress » How to align title and excerpt in one div, to top and bottom of container?

  • Hi,
    I’m a total newbie here, trying to align the title and excerpt of a tile, to top and bottom of that tile container responsively.

    <div class="custom-content"><hr />
    
    <h3>BLOG</h3>
    <div class="portbot2">DESIGN4INDIA: THE BRAND STORY</div>
    
    <div class="portbot2a">To scale the focus to the next level to impact the Startup and Innovation ecosystem pan India, NASSCOM has launched the initiative.
    <div class="portbut2"><a class="nectar-button medium see-through-2  wpb_animate_when_almost_visible wpb_fadeInUp" style=""  href="http://design4india.in/2016/12/06/design4india-brand-story/" data-color-override="false" data-hover-color-override="false" data-hover-text-color-override="#ffffff"><span>READ ARTICLE</span></a> <a class="nectar-button medium see-through-2  wpb_animate_when_almost_visible wpb_fadeInUp" style=""  href="http://design4india.in/blog" data-color-override="false" data-hover-color-override="false" data-hover-text-color-override="#ffffff"><span>MORE STORIES</span></a></div>
    </div></div>

    I’d to manually add a div in the single post to divide the title from the rest of the content. It’s painstaking work and the CSS used for it only works for one resolution.

    The top title part is responsive,

    .portfolio-items .work-item.style-3 .vert-center, .portfolio-items .work-item.style-3-alt .vert-center, .portfolio-items .work-item.style-2[data-custom-content="on"] .vert-center {
        top: 60px !important;
        transform: translateY(0%) translateX(-50%)!important;
        -webkit-transform: translateY(0%) translateX(-50%)!important;
    }

    But for the bottom I’m doing this,

    .portbot2{font-weight:bold;font-size:18px;margin-top: 480px!important;text-transform:uppercase;
    }
    .portbot2a, .portbot3a{margin-top: 10px !important;
    }
    .portbut, .portbut2, .portbut3{margin-top: 20px !important;
    }

    B/W if anybody wants to, you can see the problem towards the end of this page, http://design4india.in

Viewing 1 replies (of 1 total)
  • Moderator bcworkz

    (@bcworkz)

    I’m sorry I don’t have specific advice, but I can suggest an approach that would likely work better for you. First of all, you should strive to eliminate as many !important modifiers as you can. They can really get in the way of responsive design if they are used with positioning or dimensional styles. Often you can eliminate the need for !important by using a more specific selector. In the case of conflicting rules, the rule with the more specific selector will take precedence.

    For example, if a class selector has the color blue rule applied and an ID selector for the same element has the color red applied, the element will appear as red because IDs are more specific than classes. This is pretty obvious, other specificities can be difficult to grasp. It’s the best way to avoid !important.

    That wasn’t the approach. It’s this: Add a container (if one is not already available) within the tile, after the title. Style both width and height as 100% so it fills the space available. Style this as a flexbox, with flex-direction: column-reverse and align-items: baseline. Inner elements will then stack naturally from the bottom up.

    Good luck!

Viewing 1 replies (of 1 total)
  • You must be logged in to reply to this topic.