Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • January 2, 2015 at 5:44 pm #374107
    ruthnapal

    Hi guys,

    I am developing http://thrussells.com at the moment, and need help with two issues please.

    1. Photos of people on homepage and community appear too large on smaller devices, how can I reduce the size to avoid unnecessary over scrolling on mobiles?

    2. For the ‘in-between’ resolutions when resizing, the logo floats in the air, is there any way to have it stuck to the top of the header menu just as it is on a standard display / mobile? On smaller resolutions, the logo is positioned to the left, could the logo be centralised too?

    Thanks for your help :-)

    • This topic was modified 9 years, 11 months ago by ruthnapal.
    January 2, 2015 at 9:39 pm #374239
    Elliott

    Hi atlantio!

    1. It seems to be displaying fine on my end. We can give you some CSS to reduce it’s width a bit more. Is that what your wanting to do? If we change just it’s height and leave the width to 100% then it will look distorted.

    2. I think what you mean here is that your logo is too large so on small devices it flows off the screen on the right hand side. Is that correct? Would you like to try shortening it with CSS?

    @media only screen and (max-width: 767px) {
.responsive .logo img { max-width: 400px !important; }
}

    Cheers!
    Elliott

    January 2, 2015 at 10:26 pm #374265
    ruthnapal

    Hi Elliot, thank you for your reply.

    1. Some code to limit the width (or have padding on mobile to force the images to be shrinked) would work! At the moment the images are really large on mobile screens – this is it Portrait on the iPhone 6 Plus: https://www.dropbox.com/s/pyue3yzaypl1iv3/Image%202.png?dl=0

    2. It would be good if the logo could be bottom centre aligned when resized, as it keeps ‘jumping up’ and floating at certain points when resizing down. The two saints should be sat on the top of the next section, but aren’t at the moment. This is what it looks like: https://www.dropbox.com/s/v57wum4slgnjgro/Image%201.png?dl=0

    Thanks for your help :-)

    Andreas

    January 3, 2015 at 12:20 am #374329
    Elliott

    Hey!

    1. Add this.

    @media only screen and (max-width: 767px) {
.avia-image { max-width: 50% !important; }
}

    2. Change it to this.

    @media only screen and (max-width: 767px) {
.responsive .logo img { max-width: 400px !important; top: 20px; }
}

    And then play around with the 20px value to move it down.

    Regards,
    Elliott

    January 3, 2015 at 2:09 pm #374465
    ruthnapal

    Hi Elliot,

    * Request: Reduce width of large images at lower resolutions / landscape *
    In landscape mode on the iPhone 6 Plus, images still look really huge (it’s fine in portrait mode). Can images be constrained so the images are smaller at this size too? This is how it looks in landscape on iPhone 6 Plus https://www.dropbox.com/s/admaczue2f6ttw1/image%201.png?dl=0

    * Request: Have logo stick to bottom of header at all resolutions *
    The logo still floats from about iPad size until it snaps to the mobile size where the menu disappears. Can the logo remain touching the bottom of the header section at all resolutions? This is it floating at the moment: https://www.dropbox.com/s/sz1dmb4gg6ogvxi/image%202.png?dl=0

    * Request: Centre align logo when mobile header activates *
    When the menu button appears, the logo also still is left aligned, could it be centre aligned? https://www.dropbox.com/s/c1fwh0br2bnuyfo/image%203.png?dl=0

    Thanks for your help Eliot :-)

    Andreas

    January 4, 2015 at 6:43 pm #374736
    Elliott

    Hey!

    1. You can use some CSS like this to limit their width.

    @media only screen and (max-width: 767px) {
img { max-width: 70% !important; }
}

    2. It’s already doing that on my end. I’ll assume you got this sorted.

    3. Try this.

    @media only screen and (max-width: 767px) {
.logo, .logo a { overflow: visible !important; }
.logo img { margin-left: 10% !important; }
}

    Regards,
    Elliott

    • This reply was modified 9 years, 11 months ago by Elliott.
    January 5, 2015 at 4:50 pm #375149
    ruthnapal

    Thank you for your help and time Elliott! :-)

    One more question if you wouldn’t mind…

    The “back to top” button activates on portrait mode on mobile, but does not seem to work on landscape (tested on iPhone 4 and iPhone 6 Plus).

    Is this a problem with the theme?

    Thanks!

    Andreas

    January 5, 2015 at 4:54 pm #375152
    Yigit

    Hi!

    Please add following code to Quick CSS as well

    @media only screen and (max-width: 767px) and (min-width: 480px) {
.responsive #scroll-top-link {
display: block;
}}

    Regards,
    Yigit

    January 5, 2015 at 6:44 pm #375236
    ruthnapal

    Hi Yigit,

    I tried this and it doesn’t seem to display the button still on landscape (iPhone 6 Plus)

    Also, in reference to the code shared by Elliot earlier to restrict the size of images, can I get it to target only specific images, because at the moment it’s shrinking the logo and squashing the Google map too.

    Thanks! :-)

    • This reply was modified 9 years, 11 months ago by ruthnapal.
    January 6, 2015 at 8:05 pm #375822
    Andy

    Hey!

    scroll to top button is working fine for me:

    Could you fix it? If not please clear your browser cache.

    Which images do you want to control? If you want to control only the images showing the team, use this:

    @media only screen and (max-width: 989px)
.responsive #top .avia-team-member .team-img-container img {
width: 25%;
}}

    and adjust as needed.

    Cheers!
    Andy

    January 7, 2015 at 12:36 am #375935
    ruthnapal

    Hi Andy,

    Thanks for your help, the scroll to top button works in portrait mode, but does not appear and disappears when website is viewed on mobiles in landscape mode.

    And final question (no, really!) :P … for some reason, I have four 1/4 columns, but when resizing the screen from about 2/3 width to about 1/3 width of screen, the first column becomes really tiny with the second overlapping… just as in this image… https://www.dropbox.com/s/vchufytyovdk8wt/Size%20Problem.png?dl=0

    Any ideas?

    Thank you all so much for your time and patience :-)

    • This reply was modified 9 years, 11 months ago by ruthnapal.
    January 9, 2015 at 3:54 am #377190
    Josue

    Hi!

    Add these codes to Quick CSS:

    @media only screen and (min-width: 480px) and (max-width: 767px) {
    .responsive #scroll-top-link{display: block;}
}
@media only screen and (max-width: 989px) {
    .flex_column.av_one_fourth.first { width: 48%; }
}

    Cheers!
    Josue

    January 9, 2015 at 8:53 pm #377577
    ruthnapal

    Thank you very much Josue, Andy, Yigit, and Elliot!

    You guys have all been really helpful, I appreciate it :-)

    Kind regards,

    Andreas

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • The topic ‘Large images on small devices + logo positioning’ is closed to new replies.