Support Offline : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Equal height columns problem and iPhone/iPad fixed cover images

Featured Lock Resolved Issue
I made a test document to https://utopiapizzeria.fi/test which presents two problems with SP Page Builder.

There is two times row with same background cover image. First is fixed and second is scroll. Everything is working fine with desktop browsers and with my Android phone (Chrome), but iPhone and iPad is messing cover picture with fixed position settings.

Second part is two rows with three columns without equal height columns and with equal height columns. I'm not sure what equal height columns should to show up, because every column is different height in every browser which I have tested. Both rows looks the same in desktop browsers.

In mobile phone equal height on makes columns act oddly. The same problem can be determined with narrow browser window. Row with columns becomes totally unusable in iPhone and iPad because you can't see 3rd column at all.

SP Page Builder 2.4 (same with 2.3.5). Tested with Helix 3 and Gantry 5 templates.

9 Answers

Shibbir

More than a month ago #Permalink
Hi there,

1. I can see two times row is showing same behavior in both desktop and iPhone. (You can send me a screenshot if you have )

2. For equal height issue you can use following css in custom.css file.


.sppb-equalize-columns .sppb-row >div {
display : flex !important;
}


Thanks.

Kai Metsävainio

More than a month ago #Permalink
Hi,

1.

it was my customer who said that there are problems with iPhone & iPad, so I installed XCode to my iMac and these screenshots are from virtual iPhones & iPads with Safari:

https://www.dropbox.com/sh/z2q1qsf3a2ue7w9/AACgjAa3cthHy6qhMaXVqfRXa?dl=0

All these iPhones and iPads have same problem with first row with fixed cover background image.

2.

All iPhones has problem to show equal height columns (portrait), all columns are in same row that last is outside of view.

There is also one Android phone screenshot how equal height columns is stacked. First and second are beside and third is in it's own row.

And two images of desktop browsers, narrow window and equal height row.

Thanks, I set up css-code and now equal height columns are equal height.

Shibbir

More than a month ago #Permalink
Hi

1. If you want to show those 3 columns (Equal Height Column) in one row then you need to use bootstrap col-xs-4 class instead of col-md-4. To do this you can provide me administrator login details via pm. Note : don't forgot to send me this forum post url.

2. Still I can't understand about the fixed background issue, Can you please clear it more ?

Thanks.

Kai Metsävainio

More than a month ago #Permalink
Hello

2. By either rows have the same picture as a background image. You should see it as cover image. Now two images as attachment of first row with fixed cover background.

One with Honor 6 and one with iPhone 7. Like you can see Image is not sized as cover in iPhone screen, it's a very close up part of image. You can't see baker or dough on picture like in Honor or desktop browsers.

Attachments (2)

  • honor-cover-image.png
    honor-cover-image.png 173.3 KB
  • iphone7-10.2.png
    iphone7-10.2.png 87.6 KB

Shibbir

More than a month ago #Permalink
HI there,

1. Check the site for equal height column. Now it's showing 3 column on small device.

2. Check this images :

Fixed background : http://prnt.sc/ehprrt

Scroll background : http://prnt.sc/ehpshu

Do you need to this type of background position on mobile device ?

Thanks.

Kai Metsävainio

More than a month ago #Permalink
Yes, I want that iPad and iPhone shows SP Page Builder row cover image as cover image.

Attachment iPad view versus desktop browser.

Attachments (1)

  • cover image by ipad versus desktop .png
    cover image by ipad versus desktop .png 1010.7 KB

Shibbir

More than a month ago #Permalink
Hi there,

Can you check the site again at https://utopiapizzeria.fi/test

Thanks.

Kai Metsävainio

More than a month ago #Permalink
Hi,

I can't see any changes. Because this is iPhone/iPad problem I think that it's better use only scroll background with mobile phones.

http://stackoverflow.com/questions/36686654/fixed-background-images-disappear-on-iphone-ipad

Toufiq - Staff

More than a month ago #Permalink
Hi,

Please following the below instruction.

1. Go to the file location
components/com_sppagebuilder/assets/css/sppagebuilder.css
2. Find out the below css code

.sppb-equalize-columns .sppb-row >div{
flex: 1;
}


And replace with this code

.sppb-equalize-columns .sppb-row >div {
flex: 1;
display: flex;
}


-Thanks


There are no replies made for this post yet.
Be one of the first to reply to this post!

Leaderboard (30 days)

Paul Frankowski

Paul Frankowski

Total Accepted Answers: 133
Toufiq

Toufiq

Total Accepted Answers: 105
Sifat

Sifat

Total Accepted Answers: 59
RV

RAFFAELE VIOLA

Total Accepted Answers: 1
DS

Dustin Swayne

Total Accepted Answers: 1

116

Templates

300071

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us