Build Your Own Business Website header image

Welcome to our Members Only Forum

You are welcome to view the content on our Forum, just scroll down to view this forum post.
If you like what you find and want to be able to post a question, please check out our subscription options.
Please feel free to search the forum using either the Google Site Search above or the forum search below.

Avatar
Search

— Forum Scope —




— Match —





— Forum Options —





Minimum search word length is 3 characters - maximum search word length is 84 characters

sp_Feed sp_TopicIcon
Need CSS help for iPhone
Avatar
Jupiter Jim
Jupiter, Florida
Jedi
Members

Community Member
Forum Posts: 120
Member Since:
July 24, 2012
sp_UserOfflineSmall Offline
1
June 25, 2018 - 9:53 pm
sp_Permalink sp_Print sp_EditHistory

Rick,

Long time no see. Hope all is well. 

I restored a website using backup buddy.    Here is a page from that site: 

http://eddie.jupiterjimsdemosi.....oking-oil/

You can see the page title above the picture gallery on a desktop: 

GREASE TRAP & USED COOKING OIL

 

However, when you view this page on an iPhone 6 and in Responsinator, as well, you will see that the page title actually floats OVER the Black and White icons:

If the page title in iPhone view had the title above the black and white icons as opposed to just above the gallery, that would probably be fine with the site owner, as well.

The website was created using Genesis and LIVE Editor.   

I am wondering if you have some CSS code for the media query that could make this work on an iPhone? 

Thanks again so much for all you do!    Hope it's NOT too hot in California for you.  It's getting hot here in South Florida, sure enough!

Take Care,

Jupiter Jim 

Avatar
Rick Anderson
Desert Hot Springs, CA
Admin
Forum Posts: 13637
Member Since:
November 8, 2009
sp_UserOfflineSmall Offline
2
June 26, 2018 - 8:58 am
sp_Permalink sp_Print

You have this problem because you are using margins to do something they were never intended to do.  You are using a negative margin to move the 3 circles above the heading.

What you should really do here is change the layout so that in the html the circles come before the heading.  Then you won't need any weird jiggery-pokery to move stuff around.

It that's not possible then you should use relative and absolute positioning to move the circles above the heading.  Bear in mind this will also require you to write custom media queries so that you can adjust that positioning for different devices.

Forum Timezone: America/Los_Angeles

Most Users Ever Online: 228

Currently Online:
9 Guest(s)

Currently Browsing this Page:
1 Guest(s)

Top Posters:

Keith W Jones: 1444

Brian Tozer: 1004

Carolin: 984

Heidi Hafner: 509

John Cunningham: 423

Reece Morrel: 353

Newest Members:

saamkrish

volminFL

soundpilot

digitalaerolus

emma62755

sharonmarks

Forum Stats:

Groups: 8

Forums: 46

Topics: 7004

Posts: 34849

 

Member Stats:

Guest Posters: 6

Members: 6765

Moderators: 2

Admins: 2

Administrators: Rick Anderson, Rick Anderson

Moderators: Pierre Cote, Laura Nugent