Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • February 4, 2025 at 11:34 pm #1476365
    xfacta

    Hi there
    I have a 5 column layout in a colour section that displays side by side on desktop but stacks on mobile – how can I get it to stay side by sode and not stack vertically?

    February 5, 2025 at 6:28 am #1476388
    Ismael

    Hey xfacta,

    Thank you for the inquiry.

    We didn’t find a 5-column layout on the homepage. Where can we check this? If you need to adjust the column width in mobile view, you can try this css code:

    @media only screen and (max-width: 767px) {

  /* Add your Mobile Styles here */
  .responsive #top #wrap_all .content .entry-content-wrapper .flex_column.av_one_fifth {
    width: 19%;
  }
}

    Please note that this will affect all 1/5 elements on the site. You may need to apply a Custom CSS Class name to the columns.

    — https://kriesi.at/documentation/enfold/add-custom-css/

    Let us know of the result.

    Best regards,
    Ismael

    February 5, 2025 at 6:41 am #1476389
    xfacta

    Hi there thank you.

    I have 5 columns for the social icons – 1/5 first column nothing in in then the next 3 are the social icons and the last is empty. Is there a better way to have this so that the ocons arent spread put to the edges of the colour section?

    On mobile now the icons are side by side but are overlapping – how can I fix this?

    And also on desktop they arent centred under the heading anymore they are off skew

    February 6, 2025 at 10:36 pm #1476559
    xfacta

    Hi there any update on this for me – the icons are overlapping on mobile

    February 7, 2025 at 7:34 am #1476605
    Ismael

    Hi,

    Thank you for the info.

    Please add this css code to hide the first and last column, and adjust the margin of the first social icon.

    @media only screen and (max-width: 767px) {

  /* Add your Mobile Styles here */
  #top .av-m6kbbque-4b40b977ee353112ec1ad0bec763ce3e .entry-content-wrapper .flex_column:nth-child(3),
  #top .av-m6kbbque-4b40b977ee353112ec1ad0bec763ce3e .entry-content-wrapper .flex_column:nth-child(7) {
    display: none;
  }

  #top .av-m6kbbque-4b40b977ee353112ec1ad0bec763ce3e .entry-content-wrapper .flex_column:nth-child(4) {
    margin-left: 7% !important;
  }
}

    You may need toggle or temporarily disable the Enfold > Performance > File Compression settings afterward.

    Best regards,
    Ismael

    February 7, 2025 at 8:06 am #1476609
    xfacta

    Hi there

    thank you. So do I need the first bit of code as well as the new code? Ive tried both options and doesnt seem to be working

    February 8, 2025 at 7:52 pm #1476720
    Mike

    Hi,
    As I understand, you see this:
    Screen Shot 2025 02 08 at 1.49.50 PM
    and would like this:
    Screen Shot 2025 02 08 at 1.50.51 PM
    Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    @media only screen and (max-width: 767px) { 
	.page-id-4540 .av_one_fifth.avia-builder-el-59,.av_one_fifth.avia-builder-el-66 {
		display: none;
	}
    .responsive #top.page-id-4540 #wrap_all .content .entry-content-wrapper .flex_column.av_one_fifth {
        width: 33%;
    }
}

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

    Best regards,
    Mike

    February 9, 2025 at 3:41 am #1476747
    xfacta

    yes amazing thanks so much that worked :-)

    February 9, 2025 at 2:27 pm #1476768
    Rikard

    Hi,

    Thanks for the update, we’ll close this thread for now then. Please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Change column display on mobile’ is closed to new replies.