›
Before you ask please READ THIS

Problem with Post Grid

FLYARTFLYART
in FatMoon Posts: 293
Hi Air.. bought another copy of your great theme but unfortunately I stumble across (simple?) problems again. Using 1.8.1 of fat moon theme.
All I wanted to do is create a post grid with side content (so far so good) that is responsive (meaning post picture is left and exert is right, when going mobile post picture is on top and exerpt below; so far so good). But doing this I get huge gaps between the posts and when I go mobile the gap dissapears but text is being pushed below nex post pic (See two screenshots: One desktop view > gab is so huge you cannot even see next post, One mobile view with text below next post)...
Any idea? Thanks in advance

Link: http://lunique-foundation.org/home-2/

Comments

  • FLYARTFLYART
    Posts: 293
    PS: It should look and behave like "Foundation Projects"
  • AirAir
    Posts: 10,970
    Hello Flyart!

    I see that "Foundation Projects" are just VC rows, not post grid so they act differently.
    You have created this post grid layout or is it some default from VC?

    If these are posts:
    Try using Apollo13 Post grid layout and in blog settings set Appearance → Customize → Blog Settings → Posts list → Post look → Horizontal.

    It should look much better then.

    By the way:
    You know you can make theme header appear after few rows, instead of hiding it current way? In Page options( https://rifetheme.com/apollo13-framework/docs/content-management/pages/pages-options/ ) try Header -> Show header from Nth row

    With kind regards.
  • FLYARTFLYART
    Posts: 293
    Hi Air

    Thanks! That made the trick for the horizontal appearance! But now I lack the possibilty of styling my content (like projects, which is a static grid but has the look I want my news to appear) ... when I try to edit the looks on your apollo post grid all I get is "post body" and no options for styling?

    Cheers, Pascal
  • AirAir
    Posts: 10,970
    Hey:-)

    Yes, when you use our post grid layout you can not style it more as it relies on theme styles/settings

    I can help you style it with custom CSS if you like, just tell me what you need. You want to get as close as possible to look that you have in "Foundation Projects"?

    With kind regards.
  • FLYARTFLYART
    Posts: 293
    Hey there
    Great.. I figuered that so I already started some css moves on that but obviously you're the pro and your help is much valued! And yes.. it should come close to foundation projects (image can be a little bigger though) and look great in mobile view as well :)) And wheter title nor image should be linked as the news shall only be simple and not going further (for now) Do you need more input?
    Thanks a lot
  • AirAir
    Posts: 10,970
    OK.

    So if you want to unlink these elements we have 2 solutions:
    1. Overwrites post list generating function in child theme.
    2. Try to hide some link actions with CSS(still liks could be reached by Google).

    Let's try first with custom CSS: 
    /* disables links and hover on images */
.posts_horizontal a, .posts_horizontal .item-image {
    pointer-events: none;
}
/* restore text cursor on title */
.posts_horizontal .post-title{
    cursor: text;
}

/* styling */
.post_theme_options .formatter {
    padding-left: 60px;
}
.posts_horizontal .post-title{
    font-size: 48px;
}
    If you don't like this solution, then I will try to make instruction on overwriting theme function.

    With kind regards.
  • FLYARTFLYART
    Posts: 293
    Hi Air
    That works perfectly for me, thanks.. now I almost got my design.. just looking for a way to display the images smaller than they are now.. any simple help possible?
    thanks a bunch!
  • AirAir
    edited May 2018 Posts: 10,970
    You can use this custom CSS to make it smaller: 
    .posts_horizontal .post-media{
    width: 420px;/* lower this value */
}
.posts_horizontal .post-media + .formatter {
    margin-left: 420px;/* lower this value as well */
}
/* mobiles */
@media only screen and (max-width: 768px) {
	.posts_horizontal .post-media{
		width: auto;
		max-width: 420px;/* lower this value */
	}
	.posts_horizontal .post-media + .formatter{
		margin-left: 0;
	}	
}
    With kind regards.
    Post edited by Air on
  • FLYARTFLYART
    Posts: 293
    Hey Air

    Thanks a lot.. works like a charm! But only on desktop.. look at the screenshot how it appears on mobile view... any idea?
    Thanks, Pascal
    Datei 29.05.18, 13 49 50.jpeg
    1242 x 2208 - 1M
  • AirAir
    Posts: 10,970
    Hey :-)

    I have checked on my computer and mobile and it looks good for me. Maybe you have a cache that blocks me from viewing this?

    With kind regards.
  • AirAir
    Posts: 10,970
    Please use also this custom CSS to fix issue: 
    @media only screen and (max-width: 768px) {
	.posts_horizontal .post-media{
		width: auto;
		max-width: 420px;/* lower this value */
	}
	.posts_horizontal .post-media + .formatter{
		margin-left: 0;
	}	
}
    I will update my first answer.
  • FLYARTFLYART
    Posts: 293
    Hi again
    That's just beacause I took the code back out as I'm in the finishing stretch. It's back in and does the same as in the screen shot (after clearing caches)
    Thanks, Pascal
  • AirAir
    Posts: 10,970
    Answer in above post. In case you would miss it ;-)
  • FLYARTFLYART
    Posts: 293
    Hahaha.. yes we just missed each other.. works perfectly now! Thanks!

    Unfortunately I have to bug you once more as I have an issue when switching to https .. for an awkward reason I do no have the same header anymore?
    (https://lunique-foundation.org/)

    Thanks again, Pascal
  • AirAir
    Posts: 10,970
    You have to select your logos/images in theme settings once again while logged in via https. You should also set your site to be served by https in WordPress settings.

    Thanks to this you will have https link to your images. Otherwise, http images will be blocked when a site is served by https.

    Hope I explained it somehow ;-)

    With kind regards.
  • FLYARTFLYART
    Posts: 293
    Well.. I'm not much of an expert as you noticed by now. Butt it seems to be working now. So thanks once more!
    Pascal
  • FLYARTFLYART
    Posts: 293
    Sorry.. me again Air!
    Everything to switch to https worked fine but I have a (non existing) image file that is being called from the theme and I cannot find a way to remove that link (see whynopadlock.com message: An image with an insecure url of "http://lunique-foundation.org/wp-content/uploads/2018/05/metropol_NO-logo_light-variant_header.png" was loaded via the javascript file: https://lunique-foundation.org/wp-includes/js/jquery/jquery.js?ver=1.12.4 on line 4. The insecure URL may not be directly contained in the script file and may exist elsewhere.
    You may need to contact your web hosting provider for assistance.)

    Thanks, Pascal
  • FLYARTFLYART
    Posts: 293
    Ha! Sorry.. I replacced the non existing images in the light header and now we're all good. Sorry for that! Thanks a lot as usual!
    Pascal
  • AirAir
    Posts: 10,970
    Hey Pascal:-)

    Great you have found the issue!

    With kind regards.
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In Register

Quick Links

Categories

In this Discussion