Changes in the mobile view

  • Resolved karanjhanwer

    (@karanjhanwer)


    7 years, 10 months ago

    Hi,
    I have several queries regarding the mobile version,hope you can assist me on the same

    1. The logo is disproportionally larger when viewing it on mobile.It is occupying a lot of space on top. On the desktop version its absolutely fine

    2. The title on the slider again has very large font unlike the desktop version

    3.Is there a way I can increase the height of the images on featured posts, slider etc. The width seems absolutely fine but the height doesn’t

    4. The map of countries visited has moved outside the screen

    5. I am using a 5 x 4 format to list my Instagram images on desktop but on mobile they seem to be very small. Can we increase the size of the image and make it like say 2 x 10 ( 2 images in one row and 10 columns) ?

    Thank you 🙂

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • jarektheme

    (@jarektheme)

    7 years, 10 months ago

    Hi there,

    Thank you for getting in touch with us.

    1 & 2. Please go to Appearance → Customize → Additional CSS and add the following css:

    @media (max-width: 767px) {
    .logo img.custom-logo {
        max-width: 200px;
    }

    .frontpage-slider .caption h2 a {
        font-size: 21px;
    }
}

    3. You can change image size by installing Simple Image Sizes plugin – https://ww.wp.xz.cn/plugins/simple-image-sizes/ and then adjust kale-thumbnail size. After that, please regenerate thumbnails.

    4. Add this style to Appearance → Customize → Additional CSS:

    div#wpvc-map-content {
    width: 100% !important;
}

    5. Use this style:

    @media (max-width: 767px) {
    #sb_instagram.sbi_col_5.sbi_disable_mobile #sbi_images .sbi_item {
        width: 33.33%;
    }
}

@media (max-width: 480px) {
    #sb_instagram.sbi_col_5.sbi_disable_mobile #sbi_images .sbi_item {
        width: 50%;
    }
}

    Hope that helps.

    Kind regards

    Thread Starter karanjhanwer

    (@karanjhanwer)

    7 years, 10 months ago

    Thank you so much :)) All of them have worked. Will try no 3 for mobile and let you know.
    Just one thing, for the Instagram one, is it possible to have only one image per row instead of 2 as displayed right now. Well I tried making the 50% width to 100%, although only 1 image appears pear row but the resolution is very bad. All the images are pixelated. Hope you can help in this :))

    jarektheme

    (@jarektheme)

    7 years, 10 months ago

    It seems that you’re using Instagram Feed plugin to fetch images from Instagram. Unfortunately it’s using very small image sizes (about 150x150px) and that’s why they are pixelated when you set 100% width. The only way to fix it is by changing that image size. Please ask on plugin support forum if there are any settings responsible for this.

    Kind regards

    Thread Starter karanjhanwer

    (@karanjhanwer)

    7 years, 10 months ago

    Alright :))

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

The topic ‘Changes in the mobile view’ is closed to new replies.