Horizontal scroll on mobile

  • Resolved Lindsay Heydon

    (@lindsay-heydon)


    6 years ago

    /* Small devices */
@media only screen and (max-width: 600px) {

	/* Avoid horizontal scroll on mobiles.
	   Skip for phone field, otherwise country dropdown (Smart format) would be cropped.
	*/
	div.wpforms-container-full .wpforms-form .wpforms-field:not(.wpforms-field-phone) {
		overflow-x: hidden;
	}

    This creates a scroll effect on the fields that ‘double up’. So the Name with First Last selected and the Email with Enable Email Confirmation selected. So it appears to do the opposite of what your notes say. If I make overflow-x: visible it appears OK.

    Firefox, Windows 10.

    Should I just change my CSS for the media query?

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Support Ethan Choi

    (@ethanchoi)

    6 years ago

    Hi @lindsay-heydon,

    It looks like there might be a styling conflict with the site theme

    You could use overflow-y in the CSS snippet instead to hide the vertical scroll effect.

    div.wpforms-container-full .wpforms-form .wpforms-field:not(.wpforms-field-phone) {
    overflow-y: hidden !important;
}

    And in case it helps, here’s a tutorial from WPBeginner on how to add custom CSS like this to your site.

    Hope this helps!

    Thread Starter Lindsay Heydon

    (@lindsay-heydon)

    6 years ago

    Thank you, worked perfectly.

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

The topic ‘Horizontal scroll on mobile’ is closed to new replies.