Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • October 20, 2020 at 4:27 pm #1254407
    akak

    Hi, I am using two columns on the contact page: left is a map and info, right is the contact form.
    It looks good with screen width >1024px. When the screen width shrinks to 1024px, the two columns are quite narrow and not user-friendly.
    I would like the layout change to one column when the screen width is <1024px. The upper part will be the map and info, the lower part will be contact form.

    One more question: And may I know if it is possible to make the icons align vertical to the text?

    Thank you very much!!

    October 21, 2020 at 8:13 am #1254578
    Rikard

    Hey akak,

    Thanks for the screenshot, could you post a link to the actual page as well so that we can have a closer look please?

    Best regards,
    Rikard

    October 21, 2020 at 1:27 pm #1254653
    akak

    Hi Rikard,
    Thank you for your quick reply! I have attached the links. Actually, I would like all pages with two-column layout change to one-column layout, when the screen width is smaller than 1024px.
    Thank you so much!

    October 23, 2020 at 6:58 am #1255149
    Rikard

    Hi,

    Thanks for that. Please try the following in Quick CSS under Enfold->General Styling:

    @media only screen and (max-width: 1024px) {
.av_two_fifth, .av_three_fifth {
    margin-left: 0;
    width: 100%;
}
}

    Best regards,
    Rikard

    October 23, 2020 at 1:55 pm #1255244
    akak

    Hi Rikard,

    Thanks for your reply! However, the page layout still sticks to two-column when the screen width is between 768px and 1024px. I would like to have one-column layout for screen width between768px and 1024px.

    And the icons in the icon box on the contact page is at the moment located a bit upper than the text, can they be aligned with the text vertically?

    Thank you!

    October 23, 2020 at 4:00 pm #1255285
    Yigit

    Hi,

    1- I added following code to bottom of Quick CSS field

    @media only screen and (max-width: 1024px){ 
.flex_column {
    width: 100% !important;
    margin-left: 0 !important;
}}

    Please note it would switch every column width to 100% on screens below 1024.

    2- Edited your column and gave it a custom CSS class “icon-align” and added following code to bottom of Quick CSS field 

    .icon-align .iconbox_icon {
    top: 0px;
}

    Please review your website :)

    Regards,
    Yigit

    October 23, 2020 at 4:23 pm #1255290
    akak

    Hi Yigit,
    Thank you so much!! It works very well! :)

    October 26, 2020 at 12:07 am #1255567
    Jordan Shannon

    Hi,

    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Two-column layout to one-column layout when the screen width is’ is closed to new replies.