Footer padding on mobile

[R. whitehouse]

Hello Bill,

I am having an issue with the footer text padding on mobile and am not sure how to fix this. I hunted through the forum and did not find any resolution. I do not see any options in the styling and am not sure how to fix this since it is only appearing on mobile devices. Any help would be greatly appreciated.

Attachments:

1. 

   footer-padding.jpg
   

[R. whitehouse]

Also the logo is cut off on mobile. I tried the below code but it did not work:

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

#logo {
position: static;
}

#logo p {
margin-bottom: 0;
}

select.tinynav {
margin-top: 0;
}

}

Any thoughts. :/ I am having one of those days. Feel like I could pull my hair out. All is fine when viewed on a desktop just not on mobile…

[R. whitehouse]

I finally figured out the footer padding issue by adding a padding to left footer, I was trying to add padding or a margin to the right footer and nothing would work. eeekkk! I still can’t seem to sort out the logo issue.

[Bill Robbins]

I’d be glad to take a look for you. Is there a way to see past the coming soon page?

[R. whitehouse]

This reply has been marked as private.

[R. whitehouse]

This reply has been marked as private.

[R. whitehouse]

For the islandpopper site I found an error in code that I fixed and the mobile hero button issue is fixed but I still do not know what size the mobile hero image needs to be to view correctly. I looked through the theme instructions and forum did not find the pixel size for the mobile hero image. Thanks again for your help.

[Bill Robbins]

Be careful making the full width hero image a button on mobile devices. It make scrolling virtually impossible for many users. If they click when they mean to scroll you’ll likely lose them. It’s your call, but that’s just food from thought.

The mobile image will be visible when the screen is below 768 pixels in width. The aspect ratios get more extreme on smaller screens so I would shoot for something roughly square with the main content in the very middle of the image with lots of space around it. You’ll have more cropping there than anyplace else. Maybe try 1000 pixels square.

---

For the rent a car logo on smaller screens, I gave it a try on my iPhone and all seems well both in portrait and landscape.

I did notice in your Custom CSS there, it looks like there is an extra } at the top of the box. That will likely give you trouble with anything you add in there. You might try taking that out.

The full Custom CSS might look like this:

@media only screen and (max-width: 767px) {
	
	#logo {
		margin-top: 10px;
		position: static;
	}
	
	#logo p,
	#logo h1 {
		margin-bottom: 0;
	}
	
	select.tinynav {
		margin-top: 0;
	}
}

#footer-left {
	padding: 10px;
}

Take care,
Bill

[R. whitehouse]

Thank you Bill, I really appreciate you taking the time to look at the sites. I removed the extra bracket. I was successful in creating the mobile images, thanks!!

As for the rental car logo I had to move it down so that it would not cut off that is why it is showing ok. I wanted to have it centers on the nav bar but it cuts off on mobile.

[Bill Robbins]

Good Morning,

Inside your media query, you can add a top margin to the logo to move it around as you need to. That will make it apply to only smaller screens. If you look in the snippet I pasted in above it has a 10px top margin as an example if you need some help there.

You could also set the position there to relative and use top instead of margin-top to adjust the position as well. That’s another option for you.

Let me know if you have any trouble,
Bill

[Author]

Posts