Panel Width Question

  • Resolved pertho

    (@pertho)


    3 years, 11 months ago

    Hello! I’m working with and enjoying the Lodestar theme, but I have one issue:

    I prefer the appearance of the paralax panels on the home page when they are set to ‘two column’, but contending with making the content within the pages that make up the panels becomes much more difficult when panels are set to the two column option – the interaction between the themes two column setting and wordpress blocks often has surprising results I would rather avoid.

    To that end, is there CSS I can add so that the ‘one column’ panel setting creates paralax sections divided by a simple horizontal line, rather than the standard stepped appearance? This would allow me to have greater control over the contents of the panels, as I could simply use blocks and not run into complications arising from the ‘two column’ setting.

    Thanks in advance!

Viewing 7 replies - 1 through 7 (of 7 total)

  • Hi there!

    Would you be able to share a screenshot of what you mean? You can use an online tool for that (such as https://snipboard.io/) and paste the link into your reply.
    The URL of your site would also help.
    Thanks!

    Thread Starter pertho

    (@pertho)

    Sure! Sorry if I was unclear.

    Basically, with the panel set as “one column” under theme options in the customizer window, the boundary for the paralax effect looks like this: https://snipboard.io/GYXixw.jpg
    That’s what I referred to as ‘stepped’.

    When the “two column” option is selected instead, the appearance changes to this: https://snipboard.io/r2x9Jg.jpg
    This is the appearance I would prefer. However, this option messes with the layout of the contact form, pushing everything off to the left etc.

    So, What I would like to know is: is there CSS that can be used to alter the appearance of the “one column” theme option so the border between the image and the start of the ‘contact’ section is a straight horizontal line, as in the two column option? So I can have the desired appearance without shifting the contact form to the side, as the two column option does?

    Hope that’s clearer, and thanks for the help.

    Hello there,

    Many thanks for that clarification and those screenshots.

    CSS might be able to solve that issue for you, do you have a link to the page so that we can take a closer look please?

    Many thanks.

    Thread Starter pertho

    (@pertho)

    Hi, Sure – I hadn’t launched the site yet, but it should be live now.

    https://www.ironcauldron.ca

    Thanks again

    Thread Starter pertho

    (@pertho)

    Hello all –

    I *seem* to have found a fix playing around with some custom css. Solution I landed on was to keep the panel(s) with the ‘two column’ option selected, and include this css:

    
@media screen and (min-width: 60em ) {
	.two-column .panel-content
			.entry-content {
		-webkit-column-count: 1;
		column-count: 1;
	}
}

    I’m honestly a total novice when it comes to CSS though, so if anyone sees an obvious error or cleaner fix, I’d be curious to know!

    Thank you!

    Hi there,

    I was going to suggest this, which worked in my tests:

    .one-column.has-post-thumbnail .panel-content .wrap {
    margin-top: 0;
}

    You mentioned that you tried another method but it messed up your contact form. I wonder if this will work instead? I’m not sure what you tried but in my tests the contact form was fine when using the above code.

    Hope this helps!

    • This reply was modified 3 years, 11 months ago by jerrysarcastic. Reason: formatting error
    Thread Starter pertho

    (@pertho)

    Hi Jerry –

    Just tried your fix and it works too. So with two options I think this can squarely be marked as resolved!

    Thanks for your input, it’s much appreciated.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Panel Width Question’ is closed to new replies.

Tags