Navigation
Archive / Reduce gap between text and image colums on mobile/tablet devices
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • December 1, 2016 at 4:21 pm #1278008
    Fulgent
    Participant

    Last question today I promise! 🙂

    http://www.fulgent.co.uk

    If you take a look at my site on a laptop/desktop you will see that most pages are laid out with 2 column rows, half text, half image.

    How can i make the text and image responsive on mobile/tablet devices so there isnt loads of spacing between them?

    EG – take a look at the Technical Service page on a mobile phone; (www.fulgent.co.uk/technical-services)

    The image for Maintenance contracts is massivly spaced out from the text.
    Networking and Hardware are relativly ok
    Then the image for Software has massive spacing issues.

    Couple of other pages it happens on too but im guessing the same piece of CSS will cure it all?

    I really appreciate the help.

    Thanks

    December 1, 2016 at 4:21 pm #1278009
    Fulgent
    Participant
    This reply has been marked as private.
    December 1, 2016 at 8:28 pm #1278284
    Rad
    Moderator

    Hi there,

    You mean the spacing of images? You can add this CSS, but it will make it blurry if the mobile device is larger than your image’s width.

    @media ( max-width: 767px ) {
.x-img {
width: 100%;
}
}

    Please also note that your images has its own space which can be removed through image editing software.

    Thanks!

  • Author
    Posts
  • <script> jQuery(function($){ $("#no-reply-1278008 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>