Help with Adjusting Spacing on Mobile Site

Support
#1

Hello!

I’m having a hard time adjusting the spacing on my website’s mobile version without it screwing up the desktop version.

Website: http://akmasonjar.com

  1. No spacing between the image gallery and the “Quality Cannabis” graphic
  2. Too much space between the end of the text and before the 21+ graphic

On the subpage http://akmasonjar.com/menu

  1. Too much space between the Bud-bytes logo and the bottom.

Also, is there a way to make the phone number in the header clickable on mobile?

Thank you!

#2

Hi Chelsea,

Thank you for writing in, but we cant view your page, its under a Coming Soon page, please provide us a password on a Secure note so we can take a look.

Cheers!

#3

Hi Chelsea,

Thank you for the page password, 1) please add a CLASSIC GAP element on top of the “Quality Cannabis” graphic. Hide this CLASSIC GAP element on XL, L, and M, screen sizes so it does not affect the desktop view.



  1. Please add this to Theme Options > CSS 
@media (max-width: 767px) {
	/*padding-bottom-reset*/
	.pbr {padding-bottom: 0 !important;}
	/*padding-top-reset*/
	.ptr {padding-top: 0 !important;}
	/*reset for Bud-bytes logo on mobile*/
	div.updateDate {margin-bottom: 0 !important;}
}

Then inspect that Section with gallery and “Quality Cannabis” graphic, under the customize tab add a CLASS pbr



If the remaining spacing is still too big for you, add the CLASS ptr to the next section where the 21+ graphic is placed.

Please follow this article: How to create click-to-call links for mobile browsers

Hope it helps,
Cheers!

#4

Wow! Thank you for the fast response! That fixed everything!

Definitely using this theme for all of my future clients.

#5

You’re most welcome!

#6

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.