-
Posts
-
Hello
after Updating on to WP 5.5 and Enfold 4.7.6.2 I suddenly experienced the following problem
My container displaying on the the Startpage a picture and a Maxbutton does not convert correctly on Smartphones no more.
Soon as it is am smaller screen it is centered no more, since it is no longer full with, even the cropped size of the picture and the button are different, and no longer center either if you turn the phone to square mode, see pictures attached.
Screenshot
Screenshot 2
Screenshot 3
Screenshot 4
Please help to fix this immediately, since the page is live, I didn’t change anything and it was displaying correctly until I updatedHey p-force,
This CSS is causing that to happen:
@media only screen and (max-width: 480px) and (min-width: 0px) { .maxbutton-1.maxbutton.maxbutton-virtuelle-welten { width: 90%; } }I can’t see where it’s added though, maybe you know?
Best regards,
RikardHi Rikard,
thx for your answer, but I can’t find these ccs settings nowhere.
I look into the settings of the theme, quick css, regular css and maxbutoon setings, no luck.
Don’t know where else to search?
The strange thing is it was correctly displayed for more than a year and I did no changes, only the updates?Please let’s try a workaround:
Can you pls post me a quick css that will over rule these settings on all the 22 buttons on the page, cause they all are displayed wrong on mobile or smaller devices.
Thank you very much
Greetings PHi,
I’m not sure where the CSS is added since the browser inspector is not listing a file, but you can try this CSS to override it:
@media only screen and (max-width: 480px) and (min-width: 0px) { .maxbutton-1.maxbutton.maxbutton-virtuelle-welten { width: 100% !important; } }Is this CSS added by a plugin? If so then you might want to reach out to the developers to ask how and where it’s being added.
Best regards,
RikardHi Rikard,
still couldn’t find the solution, but your CSS worked. So I investigated some more, by disabling all other plug ins, no luck. Finally I started searching in the forum of the maxbutton developer and found the answer there, they flipped the mobile handling and added another view section.
Quote: You can add responsive styles to your button by adding a new screen ( the big Add button in top of the screen ) in the meanwhile.
So I had to create a new view section for each 22 buttons, no bulk available, but now it’s displaying again correctly.
Thx for your support and here is the link, just in case someone else get trapped with the same problem:
Maxbutton > Mobile Screen Size Fix
Greetings PHi,
Great, I’m glad that you found a solution and thanks for sharing it. Please let us know if you should need any further help on the topic or if we can close it.
Best regards,
RikardHi,
only thing is if I turn the phone for up to side view, the whole container spreads no longer responsive and appear left sided and is not in full width, but I don’t know if this is related?
Maybe you can give a look at this issue too, I also updated to 4.7.6.3. but this didn’t made an difference.
Thx and greetings P
For the other Issue I think you can close it.Hi,
Thanks for the update. Please try this CSS as well:
@media only screen and (max-width: 767px) { .home #av-layout-grid-4 .avia_image, .home #av-layout-grid-4 a.maxbutton { width: 100% !important; } }Best regards,
Rikard@Rikard
Sorry for the delayed response. This CDs works, but only limited, if I trun the mobile to left to bright view the buttons still don’t strech, see attached screeny pictures, I would be awesome if you could adjust the css for the whole page, not only for a specific site, thank you very much.
Additional question, just to place the css right, there is qiuck css option in the enfold theme section under Styling and there is another option using the customizer, which one is to use or both?
Greetings P
Hi,
Thanks for the update and screenshots. Which page are you screenshots from? The code I gave you will only apply to the home page, so you might want to remove the .home bit from the code to see if that helps.
Best regards,
Rikard@rikard the screenshot are from ivents page if you click on the home page on exponatbau or any other in mobile left turned wide view
+ I limited your css hack, like this:
@media only screen and (max-width: 767px) {
#av-layout-grid-4 .avia_image, #av-layout-grid-4 a.maxbutton {
width: 100% !important;
}
but it doesn’t make any difference, maybe this is not correct, since I need to get the same result like on home, on all pages oft the whole site+ Additional question, just to place the css right, there is qiuck css option in the enfold theme section under Styling and there is another option using the customizer, which one is to use or both?
Greetings PHi,
Please try this CSS instead:
.maxbutton-4.maxbutton.maxbutton-events { width: 100% !important; }You can use Quick CSS or the customiser, the results should be the same. If you use both then the code will be added twice, there’s no point to that.
Best regards,
Rikard@rikard
thanks for you help, but this last css works only for the button “events”but I try to get this ccs, which works fine on the “home” site, to apply to all sites of the whole page, not only limited to the “home”
@media only screen and (max-width: 767px) {
.home #av-layout-grid-4 .avia_image, .home #av-layout-grid-4 a.maxbutton {
width: 100% !important;
}
}
so if you please can adjust this so it will work for every site, main sites and all references sub sites, on the page, it would be perfect, thank youHi,
We are sorry for the late reply!
Please edit your Grid Row elements and go to Advanced > Developer Settings tab and give them a unique ID (“maxgrid” in example below) and then use custom CSS code as following
@media only screen and (max-width: 767px) { #maxgrid .avia_image, #maxgrid a.maxbutton { width: 100% !important; } }By using unique ID, you would make sure to apply changes on selected Grid Row elements only :)
Best regards,
Yigit@yigit
Thanks for the hint, but I use Enfold in German.
Can you please point out where to find the Grid Row ?
“Please edit your Grid Row elements and go to Advanced > Developer Settings tab and give them a unique ID (“maxgrid” in example below) ”Advanced > Developer setting Tab is where in Enfold or WordPress ?
Thank you very much & greetings P
Hi P,
It is called “Rasterzeile” in German, layout element where you have your images and buttons :)
Best regards,
YigitHi @Yigit
Ok on every page the container and then the sub menue and there I found itBut since max button is a plug generated button inserted by a code block, do I have to go through all pages and containers and give each button code block the same ID.
Wow that’s some work, since I have 20 different buttons on 28 different pages.There is no easier solution ?
Greetings PHi P,
You have two selectors in the code “#av-layout-grid-4 .avia_image” for images and “#av-layout-grid-4 a.maxbutton” for buttons. You should be safe using the 2nd one as following
.av-layout-grid-container a.maxbuttonsince you have custom class “maxbutton” but for the first one it would be applied to every image element inside Grid Row element so it may cause inconsistency.
Best regards,
Yigit@yigit
thx that did the trick
can you pls give the code for the image as well, since this works now on the home side only, but not on all sides, like the button code now
thx & greetings PHi,
You can use following for images
.av-layout-grid-container .avia_imageHowever, as I mentioned earlier, that might cause inconsistency since this selector would target every image element inside Grid Row element :)
Best regards,
Yigit@Yigit
Thx, yes both inserted block each other, well I guess I leave it that way for the moment,
thx for your kind assistance
greetings P
- The topic ‘WP 5.5 + Enfold 4.7.6.2. > Responsive Problem > Container With on Smartphone’ is closed to new replies.