Notifications
Clear all

[Solved] problems in the mobile version of the site (layout)

17 Posts
2 Users
1 Reactions
2,948 Views
Posts: 60
Topic starter
(@artyr)
Estimable Member
Joined: 2 years ago

there are problems on this page in the mobile version of the site, due to poor layout
https://wpforo.com/community/how-to-and-troubleshooting-2/how-to-fix-2-forums-with-same-page-id/
Please fix the problem

16 Replies
Chris
Posts: 3627
(@chris)
Famed Member
Joined: 3 years ago

We don't face UI/UX issue on that post in the mobile version, what's your Mobil screen resolution?

15 Replies
(@artyr)
Joined: 2 years ago

Estimable Member
Posts: 60

@chris It turned out that the problem is not on your side, but apparently on mine.
Please tell me how to fix this problem

Page

Horizontal scrolling appeared in the mobile version. And I can't find the cause of this problem.

Chris
(@chris)
Joined: 3 years ago

Famed Member
Posts: 3627

@artyr,

Insert below CSS Code in Custom CSS Code Field from Dashboard > wpForo > Settings > Colors & Styles Tab:

@media screen and (max-width: 460px) {
    #wpforo #wpforo-wrap {
        width: 98%;
        margin: 0px auto;
    }
}
(@artyr)
Joined: 2 years ago

Estimable Member
Posts: 60

@chris Didn't help, need another code 😥

Chris
(@chris)
Joined: 3 years ago

Famed Member
Posts: 3627

@artyr,

what is the screen resolution of your phone(the width), the code works for screens with 460px and more.

(@artyr)
Joined: 2 years ago

Estimable Member
Posts: 60

@chris I have an iphone 11

Your code worked, but it doesn't fit me. Since I don't want to indent the entire site in the mobile version

Chris
(@chris)
Joined: 3 years ago

Famed Member
Posts: 3627

@artyr,

Try this:

@media screen and (max-width: 460px) {
    #wpforo #wpforo-wrap {
        width: 100%;
        margin: 0px auto;
    }
}
(@artyr)
Joined: 2 years ago

Estimable Member
Posts: 60

@chris This code does not solve the problem

Please try to solve this problem 😥

Chris
(@chris)
Joined: 3 years ago

Famed Member
Posts: 3627

@artyr,

The reason of the problem is your theme "couponis", no matter what CSS I write, it changes everything back by default, try changing t another theme which would not make such changes.

I can recommend: Shuttle iBussines, Astra, Twenty Twelve

(@artyr)
Joined: 2 years ago

Estimable Member
Posts: 60

@chris And what kind of CSS code breaks the design?

Chris
(@chris)
Joined: 3 years ago

Famed Member
Posts: 3627

@artyr,

I guess It's not only CSS, as I tried to fix the issue with another CSS which could overwrite the problematic one.

(@artyr)
Joined: 2 years ago

Estimable Member
Posts: 60

@chris I like my theme, I tried the themes you suggested - I don't like them
I will look for ways to fix this problem with my Theme

But if you find the reason and tell me how to solve it - I will be very grateful!

Chris
(@chris)
Joined: 3 years ago

Famed Member
Posts: 3627

@artyr,

I'm sorry, but I couldn't find other solution to fix that issue.

(@artyr)
Joined: 2 years ago

Estimable Member
Posts: 60

@chris Chris I found the problem. More specifically, two problems
This is a wpForo template issue

the screenshot shows two places due to which horizontal indentation appears on mobile devices

Breaks Vetka from user Егорка
https://forum.avitoman.ru/postid/50/

Chris
(@chris)
Joined: 3 years ago

Famed Member
Posts: 3627

@artyr,

Try here and you will see that, the pointer is not the problem maker.

(@artyr)
Joined: 2 years ago

Estimable Member
Posts: 60

@chris Yes indeed. There are no problems with your template.
As a result, I found the problem and corrected the styles on my side.
Thanks for the help!
I'm closing the thread!