use on mobile devices

  • Resolved aga2442

    (@aga2442)


    1 year, 2 months ago

    Hello,

    I have been using your plugin for a long time without any problems, thank you.

    I have such a problem.

    for example; I am using 4 columns side by side with a standard look.

    but these columns start to appear one below the other on mobile or tablet devices.

    my goal is to show the 2 columns I have added side by side on mobile devices or tablet devices.

    I prepared a representative picture.

    How should I follow a way to do this?

    I am waiting for your help ??

    View post on imgur.com

Viewing 1 replies (of 1 total)
  • Plugin Author Nick Diego

    (@ndiego)

    Hi @aga2442,

    This functionality it not available within the plugin itself, so you will need to add some custom CSS to your theme.

    That said, here are a few steps to get you started.

    1. Wrap you columns shortcodes in the columns container shortcode available from the utilities option.
    2. Give it a custom CSS class, perhaps mobile-two-column
    3. Place your column shortcodes within the container.
    4. Then add custom CSS to handle the layout you are looking for.

    Here is some sample code as it would look in the Classic Editor:

    [columns-container class="mobile-two-column"]
[one-fourth-first]Place your content for the first column here.[/one-fourth-first]
[one-fourth]Place your content for the second column here.[/one-fourth]
[one-fourth]Place your content for the third column here.[/one-fourth]
[one-fourth]Place your content for the fourth column here.[/one-fourth]
[/columns-container]

    And here is some same custom CSS that should achieve the result you are looking for. 

    @media only screen and (max-width: 800px) {
	.columns-container.mobile-two-column {
		.gca-column {
			width: 48.717948717948715%;
			margin-left: 2.564102564102564%;
		}

		.gca-column:nth-child(odd) {
			 margin-left: 0
		}
	}
}

    Best,
    Nick

Viewing 1 replies (of 1 total)
  • The topic ‘use on mobile devices’ is closed to new replies.