Content Running Off the Screen in Responsive Design

  • Resolved danielcasciato

    (@danielcasciato)


    10 years, 3 months ago

    Hi,

    I’m working on this website: https://culturalconfidence.com/.

    It looks fine on mobile devices, except for the content underneath the slider on the home page runs off the screen when viewing it on a mobile device.

    This is the content I am referring to:

    Most businesses and other organizations work across cultures every day of the week.
    Do you work with culturally diverse clients and counterparts?
    Do you work with global virtual teams?
    Do you plan to relocate employees and their families on international assignments?
    We can help you be EFFECTIVE and SUCCESSFUL in a global environment.

    Is there something I can do to fix this so it doesn’t run off the screen on a mobile device?

    Thanks!

    Dan

Viewing 3 replies - 1 through 3 (of 3 total)

  • Looks like the padding in this CSS is causing that:

    .tt-callout.right-button h2.tt-callout-element {
    clear: none;
    float: left;
    padding-left: 170px;
    text-align: left;
    width: 100%;
}

    A browser tool like Firebug should help you sort this kind of issue.

    Hi dan, its all becuase of a padding issue here:

    .tt-callout.right-button h2.tt-callout-element {
  clear: none;
  float: left;
  padding-left: 170px;
  text-align: left;
  width: 100%;
}

    If you change that to the below, you get pretty much the same layout, but without the padding on the left:

    .tt-callout.right-button h2.tt-callout-element {
  clear: none;
  float: left;
  text-align: center;
  width: 100%;
}

    So somewhere in your theme you will have either a custom CSS area or if you are using a child theme, put that code at the bottom of style.css

    That should do the trick

    Thread Starter danielcasciato

    (@danielcasciato)

    Thank you to you both!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Content Running Off the Screen in Responsive Design’ is closed to new replies.