Need help? Check out our Support site, then


Fortune Theme: complex change of home page display. Possible with CSS?

  1. On my site, I have a home page which I would like to adapt its look.

    I want to make the image area on top of which the text is displayed less tall. To do this, the text display area must become wider (now has a certain maximum), the block with Quick Links must go to the right (so, probably it will be a content element with a table to hold everything)

    But that right block with Quick Links should move below the left text block when the window becomes less wide.

    Would it be possible to do this in CSS? To start with, make that text area wider and less high, as well as the image area behind it?

    The blog I need help with is ea.rna.nl.

  2. Hi there, the following will make the featured image on you main page less tall. The original top/bottom padding was 140px, and I've set it to 75px. You can edit that as desired.

    #hero.has-background {
      padding: 75px 0;
    }

    Moving the quick links to the right of the text would be problematic, but what we can do is to widen the content div over that page from 65% to perhaps 85%. See what you think with this. You can adjust the 85% value as desired.

    #hero .hentry .entry-content {
      max-width: 85%;
    }

    There is another option if you still want the quick links on the right of the text, but it is more involved. Let me know if you wish to proceed with that and I can tell you what you would have to do and then work out the CSS for that for you.

  3. Thank you.

    I'm certainly interested in getting the links on the right.

  4. Alright, we can do that. First off you have to edit that content and what you want to do is to enclose the text content and image in a div and assign a CSS id to it, and also assign a CSS id to the quick links something like this.

    <div id="hero-left">
    image and text above quick links here
    </div>
    <div id="hero-right">
    Quick links title and buttons here
    </div>

    Then replace this CSS rule I gave earlier

    #hero .hentry .entry-content {
      max-width: 85%;
    }

    with this.

    #hero .hentry .entry-content {
      max-width:85%;
      margin-left: auto;
      margin-right: auto;
    }
    @media screen and (min-width: 768px) {
      #hero-left {
        width: calc(100% - 260px);
        max-width: 100%;
        float: left;
        padding-right: 50px;
      }
      #hero-right {
        width: 260px;
        max-width: 100%;
        float: right;
      }
    }

    I've used a Media Query to limit this change to screens/windows 768px and wider since narrower than that and the text content gets too narrow and quite tall.

    See what you think and let me know.

  5. That is absolutely great. Having these on the right enable me to put the full title of one book in the button.

    It works fine on desktop/tablet. The only thing that now happens is that on a narrow screen one button doesn't want to stay at two lines height and a fixed width. Instead, the text goes outside of the button border. It would be perfect if in that case the text would actually change so at a certain width, the text would change from a long text to a short text. Could I set values for those texts in CSS and use these in the html?

    And I know it's not a good idea add a different question to a subject, but would it be possible in some way to set the height of the featured image on a per-page basis?

  6. Hello,

    The reason why you see this problem with a button in smaller screens is because you have set a fixed width for your button (width: 240px;).

    Also, I would not recommend to use tables is this case because theme comes with a responsive table functionality for smaller screens so you might see a scrollbar in mobile views.

    Best,
    Taras

  7. Apart from the scroll bar issue, when I set the width to fixed 240px and the window is wider, the table button takes up 2 lines vertically. Why doesn't it do so when the window is narrow?

    I've changed the table to divs. I do not quite understand the col-lg- and col-mg class items. I've been playing around but haven't been able to get the Quick Links header to align with the LHS of the buttons. For the rest it is fine now at all widths and the responsive layout is ok too.

  8. Could you please try this HTML instead of your current HTML:

    <div class="row">
    <div class="col-lg-8">
    R&A is the vehicle for Gerben Wierda’s ‘extracurricular activities’ (what he does next to his day job and family life — or what’s left of that). Mostly writing and sometimes a bit of training or consultancy. R&A is also the publisher of Mastering ArchiMate and Chess and the Art of Enterprise Architecture.
    </div>
    <div class="col-lg-4">
    <p>Quick Links:</p>
    <p><a class="button" href="#">Button #1</a></p>
    <p><a class="button" href="#">Button #2</a></p>
    </div>
    </div>

    Best,
    Taras

  9. I tried it but it's not a real improvement. In tablet size (wider even), the buttons are now below the text instead of next to it. The lhs with the text should shrink faster than it does now. Now, only in a very wide window do I get the quick links section next to the text. I tried experimenting with the -lg items, but I did not get it right. I restored the previous revision.

    Actually, the only thing I need with respect to the original solution is to have the Quick Links header be completely right-aligned (right-aligned with the buttons) on very wide pages. In all other widths it works fine.

  10. The problem is that you have too many rows elements with different column width and is causes grid issues. You do not need to have those rows and columns in your current HTML. Try to remove them:

    <div id="hero-right">
    <div style="border:none;" align="right">
    <h3 style="padding-bottom: 2%;">Quick Links:</h3>
    <div style="padding-bottom:2%;"><a class="button" style="width:240px;" href="https://rna.dpdcart.com/cart/add?product_id=155514&method_id=166342">Buy <em>Mastering ArchiMate</em> PDF</a></div>
    <div><a class="button" style="width:240px;" href="https://rna.dpdcart.com/cart/add?product_id=116924&method_id=123570">Buy <em>Chess and the Art of Enterprise Architecture</em> PDF</a></div>
    </div>
    </div>
  11. This is good. Thank you.

    I did a minor tweak (h3 left aligned with the buttons) by setting h3's width to that of the buttons and aligning it left.

    Can I make hero-right either top-aligned or bottom-aligned with hero-left?

  12. Unfortunately, it's not possible to align your right section with the hero title because this title is located above the hero content container.

    You can remove top margins from the Quick Links title to align it with the content on the left:

    <h3 style="padding-bottom:2%; width:240px; margin-top: 0;" align="left">Quick Links:</h3>

    Hope this helps.

    Best,
    Taras

  13. This was exactly what I wanted (aligned with the left hero, not with the hero title).

    This has the effect that when the hero-right goed below the hero-left (in narrow windows) there too little margin. Ideally, the margin would still be there when hero-right is below hero-left but not when it is to the side. I assume it should then be handled through the CSS settings for hero-right, correct?

    I tried

    @media screen and (min-width: 768px) {
    	#hero-left {
    		width: calc(100% - 260px);
    		max-width: 100%;
    		float: left;
    		padding-right: 50px;
    	}
    
    	#hero-right {
    		width: 260px;
    		max-width: 100%;
    		float: right;
    		margin-top: 0px;
    	}
    }

    But that did not work. Nor did margin-top: 0

  14. You can remove top margins from your title: https://cloudup.com/cVMgibf7qcv

    And then just add bottom margins to the #hero-left (margin-bottom: 30px).

Topic Closed

This topic has been closed to new replies.

About this Topic