SELA Theme – Adding space between nested child pages

  • Unknown's avatar
    yourembroideryservicesltd · Member ·

    Hi,

    I used this amazing piece of CSS from thesacredpath to make the SELA theme full width and it works great – thanks!

    But I have a slight issue with the nested child pages now where there is a nice space between the 1st and 2nd ones but no space at all between the 2nd and 3rd ones:

    https://swfembroiderymachine.com/swf-in-action/

    Any CSS trickery or general help greatly appreciated.

    Many thanks :)

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, I can sort of fix this with some CSS, but what is your ultimate goal for the child pages area on your front page? It may be that we will want to take a different approach to things.

  • Unknown's avatar
    yourembroideryservicesltd · Member ·

    Hi,

    Sorry for not getting back to you sooner. I was hoping you would reply as it’s your code I used and worked so well to begin with.

    Basically I needed to make the Sela theme a full width site including blog posts and after much trial and error I came across your post which basically did everything I wanted!

    The only things now I am having trouble with are :

    1. Whenever there are more than 2 linked pages in a section, some columns have no padding but up to the edge of the adjacent column with no space in between (like here for example). I just want them all to evenly spaced regardless of how many there might be in a section.

    2. The featured images are still somewhat blurry even after WordPress turned off Photon and Smush for me. Is there any way to fix it so they appear full width but sharper? I have tried higher resolution images but it makes no difference still…

    Many thanks for any advice or help you can give me! :)

  • Unknown's avatar
    yourembroideryservicesltd · Member ·

    God my grammar is awful there – let me try again:

    1. Whenever there are more than 2 linked pages in a section, some columns just butt up to the edge of the adjacent column with no space in between them (like here for example). I just want them all to be evenly spaced, regardless of how many there might be in a section.

  • supernovia · Staff ·

    Hi @swfembroidermachines, here’s the issue. Your original CSS is built to accomodate 2 columns as child pages. It has this code:

    @media screen and (min-width: 600px) {
  .child-page:nth-child(even) {
   margin-right: 0;
  }
}

    So now your second child page (an even number) does not have a margin to its side.

    You could do something like this:

    @media screen and (min-width: 600px) {
  .child-page:nth-child(even) {
    margin-right: 55px;
  }
}

    About the blurry images, under CSS are you able to specify a new “full width” ? That may help.

  • supernovia · Staff ·

    If specifying a different width in your media area doesn’t help, you could try manually specifying a header image for each page with your CSS.

    You might be happier with a theme that’s designed for full width, though. Let us know your thoughts.

  • Unknown's avatar
    yourembroideryservicesltd · Member ·

    Hi supernovia, thank you so much for the CSS for the child pages – it works great and fixed the issue perfectly.

    Regarding the blurred featured images, I already changed the Media Width to 1900px and uploaded a new image at that size to test but it didn’t help. It’s almost like the full size image is being automatically reduced then enlarged again, presenting a loss in quality, rather than just uploading at actual size and preserving the image quality… If you have any suggestions to fix that I would be happy to try them.

  • Unknown's avatar
    yourembroideryservicesltd · Member ·

    Actually, since the original question has been answered I’ve just made a new post about the blurry images here and I will mark this one as resolved. Thanks!

  • The topic ‘SELA Theme – Adding space between nested child pages’ is closed to new replies.