CE4 Pages Issue on Ipad - composition - column changing

netisfred · 2015-10-09 02:45:18

Hi Everybody,

So another little issue with the presentation of the site on Ipad.
I have an autoindex page created within "Page", and the presentation shows only one column of several thumbnail / galleries.

On desktop browser, it's perfect, on Iphone almost,
But on Ipad, the module decided to show two columns in portrait mode... If I turn the Ipad on landscape mode, the "one column" comes back.. The opposite with the Iphone : One column in portrait mode, two columns in landscape mode...

So it is just a matter of screen resolution...

As before, I tried to solve the problem with PhpPlugin and CSS customisation.

I tried to find the good line / code in the (style-component.css and others) to change this column / resolution issue , and edit the custom CSS, but I really don't find anything matching this.

EDIT : I have also a standalone autoIndex, and the same problem happens...

Does someone have a solution for this ?

Thank you.
F.

rod barbee · 2015-10-09 03:08:07

in the unminified scaffolding.css file you'll find a media query for max-width of 992px that sets items with the .step_down class in the selector to display: inline, float: left and at a width: 50%. This looks like where the two columns come from on portrait ipads

The media query for max-width of 600px sets display: block, float: none and width: auto

this gives one column

So try changing the settings in the 992px media query to those of the 600px media query.

I don't know if this will cover all items. You may need to add more media queries.

netisfred · 2015-10-09 16:43:42

Again thank you Rod to have a look on this question
It's ok I have unminified the css, and going to look for these lines.

Hope it will work !

netisfred · 2015-10-09 16:55:33

I think I can say "just perfect" !
It is exactly what I was looking for all day...

So ok next problem...

Thank you very much !

rod barbee · 2015-10-09 20:13:49

It worked? Great!
I figured there would probably be more to it than that.

netisfred · 2015-10-09 20:22:34

Héhé yes it worked And... you're right ! it's going to be a little more complicated than that.

I have not seen that at the moment.. but :
The result is ok on Mobile devices, for the iconic thumbnails in autoindex pages.
but it breaks completely the presentation of the thumbnails in the galleries.. in landscape mode... And... breaks also the black and white overlay on the thumbnails...in landscape mode.. No problem in portrait mode.

So.. what can I say.. It works ! but .. It breaks many things

I have to search what to keep in this custom code. I think it is in this block, where I have to erase some lines.
I have to test ..

@media screen and (max-width: 992px) {
.container_12 .grid_1,
.container_16 .grid_1,
.container_12 .grid_2,
.container_16 .grid_2,
.container_12 .grid_3,
.container_16 .grid_3,
.container_12 .grid_4,
.container_16 .grid_4,
.container_12 .grid_5,
.container_16 .grid_5,
.container_12 .grid_6,
.container_16 .grid_6,
.container_12 .grid_7,
.container_16 .grid_7,
.container_12 .grid_8,
.container_16 .grid_8,
.container_12 .grid_9,
.container_16 .grid_9,
.container_12 .grid_10,
.container_16 .grid_10,
.container_12 .grid_11,
.container_16 .grid_11,
.container_12 .grid_12,
.container_16 .grid_12,
.container_16 .grid_13,
.container_16 .grid_14,
.container_16 .grid_15,
.container_16 .grid_16 {
display: block;
float: none;
width: auto
}
.container_12.step_down .grid_1,
.container_16.step_down .grid_1,
.container_12.step_down .grid_2,
.container_16.step_down .grid_2,
.container_12.step_down .grid_3,
.container_16.step_down .grid_3,
.container_12.step_down .grid_4,
.container_16.step_down .grid_4,
.container_12.step_down .grid_5,
.container_16.step_down .grid_5,
.container_12.step_down .grid_6,
.container_16.step_down .grid_6,
.container_12.step_down .grid_7,
.container_16.step_down .grid_7,
.container_12.step_down .grid_8,
.container_16.step_down .grid_8,
.container_12.step_down .grid_9,
.container_16.step_down .grid_9,
.container_12.step_down .grid_10,
.container_16.step_down .grid_10,
.container_12.step_down .grid_11,
.container_16.step_down .grid_11,
.container_12.step_down .grid_12,
.container_16.step_down .grid_12,
.container_16.step_down .grid_13,
.container_16.step_down .grid_14,
.container_16.step_down .grid_15,
.container_16.step_down .grid_16 {
display: block;
float: none;
width: auto
}

netisfred · 2015-10-09 20:25:36

And at this moment I am struggling with Stage for such a simple thing..
To put the identity plate at the Center of the page... All kind of changements in lightroom do nothing, so I am looking for the good line in the CSS to

rod barbee · 2015-10-09 23:07:21

And... breaks also the black and white overlay on the thumbnails...in landscape mode.

this is probably because the mobile version uses the CE4 Standard grid layout rather than the Masonry layout. You would need to add the css for that layout too
http://ttg-tips-and-tricks.barbeephoto. … galleries/

And at this moment I am struggling with Stage for such a simple thing..
To put the identity plate at the Center of the page... hmm All kind of changements in lightroom do nothing, so I am looking for the good line in the CSS to wink

Not so simple, really.
You're talking about changing the page structure. That will require using phplugins and essentially creating an entire new page.

Or I suppose you could edit the index.php files (and the template_index.php files) and manually move things around (and then do it again after every time you export). That's a lot of work and well beyond any official support.
It's going to require that you learn some html, php, css, etc.

Afraid I can't be any help with that but perhaps there are some php/html/css gurus in the community that would be willing to tackle it.

netisfred · 2015-10-13 00:12:57

Hello Rod,

My apologies for this late reply. I am always in the code and the construction of the site

So, for this problem of presentation on Ipad, it's solved !
In fact, it was ok to change this code, I finally saw if I didn't paste the whole code, for this part, it couldn't work...
I pasted and change the whole part and it is ok and perfect the presentation is ok !

And for Stage, ok I think the presentation will stay as it is I have still a lot of work to do before changing this

Thank you again Rod !

Community @ The Turning Gate

#1 2015-10-09 02:45:18

CE4 Pages Issue on Ipad - composition - column changing

#2 2015-10-09 03:08:07

Re: CE4 Pages Issue on Ipad - composition - column changing

#3 2015-10-09 16:43:42

Re: CE4 Pages Issue on Ipad - composition - column changing

#4 2015-10-09 16:55:33

Re: CE4 Pages Issue on Ipad - composition - column changing

#5 2015-10-09 20:13:49

Re: CE4 Pages Issue on Ipad - composition - column changing

#6 2015-10-09 20:22:34

Re: CE4 Pages Issue on Ipad - composition - column changing

#7 2015-10-09 20:25:36

Re: CE4 Pages Issue on Ipad - composition - column changing

#8 2015-10-09 23:07:21

Re: CE4 Pages Issue on Ipad - composition - column changing

#9 2015-10-13 00:12:57

Re: CE4 Pages Issue on Ipad - composition - column changing

Board footer