Resposive mobile problem

Hello,

i am having a trouble with mobile version of website.
Width of page is not fixed. I can move it left and right and cant find the reason for it.

Could you pls help me?

BR

Hello there,

Please try adding this CSS code to Appearance > Customize > Additional CSS:


html, 
body {
  overflow-x: hidden;
}

Regards,
Kharis

Thank you, it worked.

have a nice day Kharis :wink:

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

Hello,

I am also having trouble with the mobile version of my website.
The slider is not centered and Kontakt section at the bottom as well as the footer are aligned to the left

Can you help?

Thanks

Josef

Hello Josef,

I found the below extra CSS code applied.


.container {
   margin:0 auto; /* this will center the page */
   width:1240px; /*  use your width here */
}

I think it’s where the issue coming from. What will happen if you put it off?

Regards,
Kharis

Hello Kharis,
I deaktivated the CSS code and now the second container (WAS HABEN FENGSHUI …) is not centered anymore but every word under one another
Thatr’s why I inserted the code.
Regards
Josef

Hello Kharis,

have you had a chance to look at the website without the CSS code?
I my opinion it looks worse than with the code but still not the way it ought to look.
The difference between the second row (WAS HABEN …) and the others is that I used the Site Origin Editor vs the plain text editor for the other rows. Is the Site Origin Editor non-responsive?
Can the Plugin TinyMCE Advanced cause the problem?

Regards
Josef

Hello there,

I am sorry for the long delay. Would you mind taking a screenshot of the trouble you are seeing? This could help me easier provide you with the possible working solution. Please note that we can’t process direct image attachment, so have to upload your image file to the free file hosting service like cloudup.com.

Regards,
Kharis

Hello Kharis,

I uploaded the pictures to cloudup.
The link is: https://cloudup.com/cql31B8D0eA
The screens are either somehow “compressed”, especially the pages like FengShui, Persönliches Coaching, Wohnkonzepte and Yoga or they are aligned to the left (Header Slider) compared to the regular PC screen.
Hope this helps
Best regards

Josef

Hello Josef,

If I could get it correctly, you would need to edit your widgets inside your pages. Under the Widget Styles options, expand the Layout tab and then enter 0 in the all padding fields.

Regards,
Kharis

Hello Kharis,
thanks.
Did you mean to enter 0s in the mobile padding fields only or in the regular fields as well?
because for the regular padding I chose 0 150 0 150 on purpose to center the text.

Regards
Josef

Hello Kharis,
I was a little bit reluctant to try it out, but finally I did. and it worked perfectly.
Awesome
You are the best
Thanks
Josef

Hello Josef,

The most ideal way to center the content and avoid responsiveness problem at the same time, you can use the below CSS code:


@media only screen and (min-width:992px) {
  
  .entry-content {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
  }
  
}

To apply it on specific page, you can use page ID.


@media only screen and (min-width:992px) {
  
  .page-id-90 .entry-content {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
  }
  
}

Regards,
Kharis

Hi Kharis,

How can I centre a specific section of my page, the below is what I’m trying to fix

www.tangiblebranding.com

Hello there,

I found this custom margin applied to your editor widgets, which’s resulting spacing issue on smaller screen.

The best possible approach to accomplish same result is by adding a custom class name to Attributes > Widget Class. For example my-widget like this.

47%20AM

Update page. To control CSS margin, you can use this CSS code:

    @media only screen and (min-width: 781px) {
      .my-widget {
        margin: -30px 0 0 50px; 
      }
    }

Apply it to Appearance > Customize > Additional CSS from dashboard.

@media only screen and (min-width: 781px) media query in the code above restricts CSS rules to only be executed on a screen larger than 780px.

Regards,
Kharis

Hi Kharis,

This has worked perfectly, thank you for your help!

You’re welcome! We’re happy to have opportunity to assist you.

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis