mobile device issues

[creatorofstuff]

I have three things that look wrong on a mobile device.

1. Please see screenshot called “dogs”. On a phone, the image of the dogs overlaps the full width text block just below it. I did change the margin on the full width text block so that the dogs appear to be sitting on it by giving it a negative margin. It works on a computer screen and a tablet. But on a phone, not so much.

Did I go about this the wrong way? The theme does not allow a special class when you add an image using the page builder, so I had to do it to the full width text block.

2. Please see screenshot called “below”. How can I reduce the space (padding?) in the next full width text block (the white one) only for a phone? It looks ok on larger devices but not on a phone.

3. Please see screenshot called “tablet”, and also “dogs”. See how “really swell greeting cards” is not centered in the full width text block? It is vertically centered when you view this on a computer screen. But not on mobile devices. Can you suggest a way to make that happen?

Thank you!!

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Hi

1) Try putting the css in a media query so that it only applies to large screen sizes

2) You’ve added blank text boxes, these are what are causing the pacing

3) It’s because of the font you’re using, it aligns the letters to the top of the line instead of the bottom, when I disable the font in the inspector the backup font is centred perfectly

– Kyle

[creatorofstuff]

I really appreciate your help.

1. I think you give me way too much credit with the media query thing. When I start to scale down a browser window, I see the point at which it “breaks”, but I have no idea how to determine what size that is. Or exactly how I would word it in the code.

All I want is for the image of the dogs to appear to be sitting right on top of the blue full width text block.

🙁

2. I don’t see where I’ve added the blank text boxes. ? The white section in question has the setup you see below. I used shortcode to divide the full width text block into thirds. I only wanted content in the middle third. So I left the outer 1/3 sections blank. But it leaves a huge amount of space at the top and the bottom of the section.

Is that wrong? If that is wrong, can you tell me how to do it better? Or can you be more specific about where I’ve added a blank text box?

[one_third]

[/one_third]
[one_third]
The content is here.
[/one_third]
[one_third_last]

[/one_third_last]

3. Thanks for pointing that out. I couldn’t get it to behave so I added some top padding for lack of a better solution.

Thanks!

[Kyle – SUPPORT]

The best way to solve this thread is if you provide me with a login so I can try and fix these issues for you

– Kyle

[creatorofstuff]

This reply has been marked as private.

[Kyle – SUPPORT]

Ok done these for you

– Kyle

[creatorofstuff]

Thanks, Kyle! I really appreciate the support. 🙂

[Mohammad – SUPPORT]

Hi,
Great thanks to Kyle 🙂 .
Mohammad