the order of the actual wrapping div, ul etc elements (prices, content text, title etc ) was changed slightly to make it possible to make things fit on a screen (affects default style only) when viewed on small screen devices while adding/changing *some* of the css to make this look as it did before

this was simply not doable before dynamically using media queries css and in mamy cases will have resulted in quite a messed up screen when using mobile devices..

that’s just as an explanation

with your multitude of additives for your italien salad, this might well cause an issue and i’ll look if i can account for this too.
In the meantime though – might also be the case – are you using any custom css on those elements ? perhaps simply removing any custom css there will also “fix” it so to speak (one might be overriding the other)

I’ll have a look here too if i can reproduce your layout and see what happens, but if you could also check any custom css you might have and let me know , that would be great

Could you also send me the url of your site so i can have a look at the actual css that is being applied ?

thanks

>But with the custom css it worked very fine over a year and some updates
sure , as unless it is strictly necessary (and in this case it was unfortunately) , i do not change these kind of things

that aside.
i get a a ton of javascript errors on you site (you have done something like this <!--?php . that’s really not a good idea as it will still be read and parsed in all sorts of places)
i suspect you did that to disable your custom css (as i asked , and thanks for that)
However, looking at what we have now, i think it will be better in this case if you just leave things as you had them – including the css you were overriding – and I will see if i can come up with a line or 2 of css you can additionally add (or change) to get you back to where we were from a layout perspective

i.e you are doing

.wppizza-article-default .wppizza-article-additives{ display: block; /* etc */}
if you do/revert to
.wppizza-article-default .wppizza-article-additives{ display: inline-block; /* etc */}
additives are next to the title (as they are by default) and things dont move around all over the place

if you DO want the additives to be below the title (i.e keep the display:block)

then you could *add* this
.wppizza-article-default .wppizza-article-sizes { position: absolute;top: 0;right: 0;}

BUT MAKE SURE you reset/remove this one again below 420px (as that’s where the media query kicks in that moves things underneath each other to cater for mobile devices )

i.e when resetting (i’m writing this out here – as reference to myself too – as i may even be adding this or similar as a default to the next update )

@media only screen and (max-width: 420px){
.wppizza-article-default .wppizza-article-sizes {position: unset !important;}
}

PS: the easiest was/is always to simply use wppizza->layout->styles->responsive
(which always displays the title above everything else)

However, I just happen to like the default layout myself (and alwasy did), but it does need a lot of css to make it work on different devices as it also depends on how many sizes there are for an item etc …
(again, that’s why the changes were made in 3.10 – to make it as usable as possible “out of the box” with any – or at least most – themes)

…………

yes, i try to keep these relatively drastic changes to an absolute minimum, but it sometimes cannot be helped (to make things better for all) and if I do, I’m happy to hear about (and solve if at all possible) any issues

(Just felt the need to say this, lol)

generally that all sounds good.
just out of interest though, what phone are you using there you have an issue with ?

it really all depends on the amount of content you have and the device used (i.e ratio / width the screen has)
i dont know anything about the Mate20 Pro.
However ,having played with a few things, it seems to me it has a width of about 430 or so

i can see 2 options.
a) the media queries in the original css kick in at 420 i.e it’s set to do

@media only screen and (max-width: 420px){/* css stuff */}
you could change this to 440 for example (or something around that number). i.e
@media only screen and (max-width: 440px){/* css stuff */}
and the whole reshuffeling of things will occur earlier

another option would be to restrict the width that the title can take up , before it starts to linebreak
so, something like

@media only screen and (max-width: 440px) and (min-width: 420px) {.wppizza-article-h2{display:inline-block; max-width:120px}}

or similar – you’ll have to play with it a bit and or target only the items/categories where you need it

(or – as mentioned previously – use the “responsive style” layout to start off with which will eliminate a lot of this messing around. But I understand that you might not want to do that of course. )

PS: I would also suggest you add the float: none !important; i referred to earlier in this thread to center things under 420
but that’s up to you (if you dont like it centered that also just fine of course)