Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • January 10, 2024 at 6:03 pm #1429761
    Enfoldfanatic

    Hi Guys,

    I have got a page containing basically 2 columns, a 2/3 column followed by the 1/3 columns. I was wondering if there is a css snippet available to enforce that the 1/3 column keeps a certain min-width while the 2/3 column behaves flexible in width. This should be this way until the breakpoint (767 px) where the 1/3 column is plotted in full width below the 2/3 element.

    I have tried adding a min-width to the div class of the 1/3 column but than the 1/3 column directly jumps out of sight to the next row when the viewport gets smaller.

    Thanks and regards

    January 11, 2024 at 8:25 am #1429784
    Ismael

    Hey Enfoldfanatic,

    Thank you for the inquiry.

    Move the columns inside a Color Section element and apply a custom class name (Advanced > Developer Settings . Custom CSS Class) to it, “av-custom-flex-column ” for example. You can then add this css code to apply a minimum width to the first column.

    .av-custom-flex-column .entry-content-wrapper {
    display: flex;
    flex-direction: row;
}

.av-custom-flex-column .entry-content-wrapper .flex_column:nth-child(1) {
    min-width: 300px;
}

    Best regards,
    Ismael

    January 11, 2024 at 9:05 am #1429790
    Enfoldfanatic

    Hi Ismael,

    Thanks for your solution, the only thing is that the column which should have a fixed width is the 2nd column. Should I simply replace the “nth-child(1)” with “nth-child(2)” to apply the behavior on the 2nd column?

    Kind Regards

    January 12, 2024 at 7:01 am #1429858
    Ismael

    Hi,

    Should I simply replace the “nth-child(1)” with “nth-child(2)”

    Yes, that should work. Is the second column a 1/3 column element?

    Best regards,
    Ismael

    January 12, 2024 at 9:11 am #1429871
    Enfoldfanatic

    Hi Ismael,

    Indeed the 2nd column is the 1/3 column. I have applied this css, in general it works out fine however it seems that this code forces a “equal height” behavior of both the 2/3 and 1/3 column. I noticed this since the 1/3 column has a border but the content in there is limited. Now when narrowing the viewport the 2/3 column nicely behaves responsive but the border of the 1/3 column (with the min-width setting) stretched along.

    Can we update the snippet to ensure that the 1/3 column doesn’t stretch out unnecessary since the border displays the wrong displaying.

    Thanks and regards

    January 12, 2024 at 2:11 pm #1429898
    Ismael

    Hi,

    Thank you for the update.

    We may need to see the site so that we can inspect the elements and check the current settings. Please provide the site URL in the private field. A screenshot will also help.

    Best regards,
    Ismael

    January 12, 2024 at 2:14 pm #1429899
    Enfoldfanatic

    Hi Ismael,

    I’m posting a screenshot URL and the site link in the private content.

    Thanks for your help!

    January 13, 2024 at 3:31 pm #1429985
    Mike

    Hi,
    Try removing the css above and try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field instead:

    @media only screen and (min-width: 768px) and (max-width: 1290px) { 
#main .showroomfirst .av_two_third.showroomcontainer {
	width: 48%;
}
#main .showroomfirst .av_one_third.dealerdetailsrechts {
	width: 340px;
	padding: 25px;
	float: right;
	margin: 0;
}
}

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.