Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #371069

    There is too much white space on the left and right side when the website is displayed on a mobile. Its on every page. In landscape with 4 x 1/4 containers next to each other it will display just one 1/4 container. I received custom css so now i can see 2 out of 4 next to each other:
    @media only screen and (max-width: 767px) {
    .responsive #top #wrap_all .flex_column {
    width: 48%;
    margin-left: 4px;
    margin-right: 4px;
    }
    }
    But with this solution there is too much white space on the left and right in landscape on a mobile. In portrait it looks terrible. And its not centered in landscape.
    1. How can i reduce the white space on the left and right (and center everything in landscape) on every mobile page with the option of 2 x 1/4 containers next to each other?
    2. In the socket i have a text displayed: “shortcode not loaded”. How can i remove this?
    3. What css do i need to change the background color for all the top-icon boxes and which css code for the background color for all the left-icon boxes?
    url for issues 1 and 2:
    http://mobt.me/4djS
    http://mobt.me/4dg7

    #371165

    Hi!

    1. Try with this:

    @media only screen and (max-width: 767px) {
      .responsive #top #wrap_all .container {
        width: 95%;
        max-width: 95%;
      }
    }

    2. I’m not seeing that.

    3. Use this:

    .iconbox_top .iconbox_icon {
        background: red !important;
    }
    .iconbox_left_content .iconbox_icon {
        background: blue !important;
    }

    Best regards,
    Josue

    #372285

    Thanks Josue!! I removed the option with 2x 1/4 displayed on a mobile. But there is one page where i would like display 2x 1/4:
    The following css did the job.
    ——————————————————————
    @media only screen and (max-width: 767px) {
    .responsive #top #wrap_all .flex_column {
    width: 48%;
    margin-left: 4px;
    margin-right: 4px;
    }
    }
    ——————————————————————-
    How can i apply this on just one page only on a mobile in landscape modus.(not in landscape)?
    re: 2. In the socket i have a text displayed: “shortcode not loaded”. How can i remove this?
    Here is an example with this socket text. http://goo.gl/8LJkUO
    Its the same page where i would like to display 2x 1/4 out of 4 on a mobile in landscape modus.(not in landscape)

    #372472

    Hi!

    Refer to this on how to adjust your media queries to target landscape/portrait modes:
    http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

    Regarding the footer text, try disabling all third-party plugins to see if it gets fixed.

    Cheers
    Josue

    #372561

    Hi Josue,
    Thanks but is it possible to apply a media querie to one page instead of all the pages? and if so, how can i accomplish this?

    the following querie applies to all the pages.
    @media only screen and (max-width: 767px) {
    .responsive #top #wrap_all .flex_column {
    width: 48%;
    margin-left: 4px;
    margin-right: 4px;
    }
    }

    #372569

    Hey!

    Please change your code to following one

    @media only screen and (max-width: 767px) {
    .page-id-59 #wrap_all .flex_column {
    width: 48% !important;
    margin-left: 4px !important;
    margin-right: 4px !important;
    }
    }

    You can right click on Chrome or Firefox to inspect elements to find page ID’s http://i.imgur.com/HyPTCRg.jpg

    Regards,
    Yigit

    #373283

    Thank you guys!! Works like a charm!

Viewing 7 posts - 1 through 7 (of 7 total)

The topic ‘too much white space left and right on mobile’ is closed to new replies.