[ldiano]

When I use the ‘full width’ option in the format for a page, it is not fully responsive on the iPad.

Any thoughts about how to troubleshoot this?

http://thepowerinsport.com is an example.

Thank you.

[ldiano]

Hi,
Could the issue be that we are using a jpg as the background to that page that is preventing the resizing of the page.

If so how could we change this code to allow us to use the jpg yet the text automatically responds to iPad or smartphone? I know this might be beyond this forum, however your help is appreciated.

Here is the page. http://thepowerinsport.com/footie-project/fp-landing/

Thank you.

[ahmetsali]

Hi, i just checked your source code now, and i see you have used static inline styles on paragraph elements. That makes it nearly impossible to make it responsive. You need more semantic markup at first;

– use headings for big-bold sized text instead of paragraphs
– style your elements by giving them a class
– use background-size: contain for background images,

That is all i can suggest you.

[ldiano]

Thank you. We will keep that in mind. Sadly our coding skills are very basic and we do not know how to do what you have suggested.

Do you know of an online course?

[ahmetsali]

sure, check out the link below;

http://learn.shayhowe.com/html-css/

[ldiano]

Thanks.

[ldiano]

On the iPad and iphone the right and left margins are still there.

The desktop looks great… but it’s the ipad and iphone that still have margins.

Is there code to remove those margins as well ?

Thank you.

[ahmetsali]

Hi, which margins? are you sure you have posted on right topic?

[ldiano]

Sorry , it’s on this page that white margins appear on the left and right.

http://thepowerinsport.com/footie-project/fp-landing2/

[ahmetsali]

try adding this custom css code;

.page-id-8982 .middle .row {
   max-width: none !important;
   width: 100%;
}

[ldiano]

Thanks.
It works but it seems to slow down page loading quite a bit.

It could something else, e.g. my smartphone, that is slow. I don’t know.

[ahmetsali]

you need to reduce your background image size, it is too weight (2.8mb) in size for web, you can try;

– convert your image to jpg format and optimize it for web, it should be about 500kb at max.