Tagged: , , ,

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • December 20, 2014 at 10:52 pm #371069
    Dutchman

    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

    December 21, 2014 at 5:54 am #371165
    Josue

    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

    December 23, 2014 at 10:16 pm #372285
    Dutchman

    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)

    December 25, 2014 at 2:02 am #372472
    Josue

    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

    December 29, 2014 at 2:10 pm #372561
    Dutchman

    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;
    }
    }

    December 29, 2014 at 3:01 pm #372569
    Yigit

    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

    December 30, 2014 at 8:55 pm #373283
    Dutchman

    Thank you guys!! Works like a charm!

  • Author
    Posts
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.