'full width' not responsive on IPad

Posted in : Bloggy WP
ldiano
Participant
20 July 2014 at 06:28
#15272

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
Participant
22 July 2014 at 00:13
#15287

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
Keymaster
24 July 2014 at 15:31
#15318

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
Participant
24 July 2014 at 16:59
#15327

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
Keymaster
24 July 2014 at 17:47
#15328

sure, check out the link below;

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

ldiano
Participant
24 July 2014 at 18:12
#15329

Thanks.

ldiano
Participant
7 September 2014 at 19:59
#15965

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
Keymaster
15 September 2014 at 14:49
#16042

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

ldiano
Participant
15 September 2014 at 16:16
#16043

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

http://thepowerinsport.com/footie-project/fp-landing2/
ahmetsali
Keymaster
15 September 2014 at 18:29
#16063
try adding this custom css code;
```
.page-id-8982 .middle .row {
   max-width: none !important;
   width: 100%;
}
```
ldiano
Participant
15 September 2014 at 18:53
#16066

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
Keymaster
15 September 2014 at 19:29
#16069

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.

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in and have valid license to reply to this topic.

License required for the following item

Bloggy WP - Responsive Minimalist WordPress Theme

by pixelwars