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

  • Author
    Posts
  • #3042043

    gctwnl
    Member

    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.

    #3042168

    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.

    #3042174

    gctwnl
    Member

    Thank you.

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

    #3042188

    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.

    #3042189

    gctwnl
    Member

    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?

    #3042193

    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

    #3042194

    gctwnl
    Member

    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.

    #3042195

    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

    #3042196

    gctwnl
    Member

    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.

    #3042197

    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>
    #3042198

    gctwnl
    Member

    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?

    #3042199

    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

    #3042200

    gctwnl
    Member

    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

    #3042201

    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).

You must be logged in to reply to this topic.