Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #783764

    Hey everyone,

    Could you help me out with this…

    On the desktop version of my site, I’m opening projects with a fullscreen image. It looks great. But on mobile, it behaves really weird.

    Can you provide CSS so that when viewed on mobile, the image is scaled down to the width of the mobile size?

    Webpage example:

    Password to view the pages in the private content!

    Thanks!

    #783831

    Hey ccyran,

    Ive checked your site and youre using a big and only image, so, you have two options:

    1) You can show just the man like this http://prntscr.com/f1bo9x using this custom CSS code:

    @media (max-width: 481px) {
    .avia-fullscreen-slider .avia-slideshow[data-image_attachment="fixed"]>ul>li {
      background-position: -103px 0px !important;
    }
    

    2) You can create an image exclusively to the mobile screens, in this way, you`ll need to create the same image with different dimensions and apply this custom CSS code:

    @media (max-width: 481px) {
     .avia-fullscreen-slider .avia-slideshow[data-image_attachment="fixed"]>ul>li {
      background-image: url('new_image_link.png') !important;
      bacgrkound-repeat: no-repeat;
     }
    }
    

    Best regards,
    John Torvik

    #784200

    Hey John,

    Thanks for the response. I apologize Im confused. My ask isn’t just for that page with the split image, it’s for every one of my projects. Each project opens on a fullbleed photo. But it’s not responsive at all on mobile.

    I’m confused by having to upload another image exclusively to mobile screens.

    There isn’t simpler CSS that would make those fullscreen images fullwidth on mobile?

    Thanks!
    Chris

    #784205

    Hey!

    I may have answered my own question haha. If I make the element fullwidth slider, instead of fullscreen slider, it behaves better.

    I wish I could keep fullscreen slider but have it behave the way fullwidth slider does on mobile.

    #784298

    Hi,

    We’re glad that you found the answer! :D Do you need help with anything else, or can we close this thread?

    Best regards,
    Sarah

    #784734

    Hey I do! Is there anyway to add a margin only on mobile so my fullwidth images don’t sit underneath my header logo and hamburger navigation?

    #784894

    Hey Chris!

    You can try this in Quick CSS or in your child theme’s style.css file.

    @media only screen and (max-width: 767px) {
       .responsive #top #main {
          padding-top: 80px !important;
       }
       #header {padding-top:0px !imporant}
    }

    I also set the header’s top padding to 0 (the default is 10px), but you can remove that line, if you want. Please adjust the values to your preference. :)

    Best regards,
    Sarah

    #785413

    Hey Sarah,

    This works! But I don’t want it to affect the homepage of my site, because it pushes the text far away from the header. Any suggestions? This is perfect, I just dont want it to affect the homepage & “work” page of my website.

    Thank you,
    Chris

    #785539

    Hi,

    May you provide us the page list that you want to affect this code?

    Best regards,
    John Torvik

    #786054

    Hey John,

    That’ll be a bit tricky for me to tell you. It’s all my portfolio pages. So on my website, every page that’s one of those thumbnails below.

    #786478

    Hi Chris!

    There are two ways to do this. Either you specify ALL the pages you want the CSS to apply to, or you specify which pages you DON’T want the CSS to apply to.

    I’ll explain how to do both.

    A. Specify which pages you want the CSS to apply to.

    So each page gets its own class, which is set in the body tag. For example, for this page, the body tag goes something like this:

    <body id="top" class="portfolio-template-default single single-portfolio postid-4621 boxed open_sans ">

    So here’s what you do: get the class of  all the pages you want to apply our CSS, and put it in the selector, like so:

    @media only screen and (max-width: 767px) {
       .responsive .single-portfolio#top #main {
          padding-top: 80px !important;
       }
       .single-portfolio #header {padding-top:0px !imporant}
    }

    ^That applies the CSS to all your single portfolio pages (which have the class single-portfolio).

    Or if you want to be super specific, you can use the unique page ID or post ID, like this:

    @media only screen and (max-width: 767px) {
       .responsive .postid-4621#top #main,
       .responsive .postid-4641#top #main,
       .responsive .postid-4616#top #main  {
          padding-top: 80px !important;
       }
       .postid-4621 #header,
       .postid-4641 #header,
       .postid-4616 #header {padding-top:0px !imporant}
    }

    ^That one applies for Zach Wilson, Galazy View, and RGA Stories. You can add more pages, just follow the format. Here’s a tutorial on grouping CSS selectors. Please note how there is no space between the page/post ID and #top.

    B. Specify which pages you DON’T want the CSS to apply to.

    Use the magical  :not selector. (There’s a tutorial here,too.)

    You mentioned that you didn’t want the CSS to apply to the homepage. If that’s the ONLY place you don’t want it, then we can take its class (which is home) and then use this code:

    @media only screen and (max-width: 767px) {
       .responsive #top:not(.home) #main {
          padding-top: 80px !important;
       }
       #top:not(.home) #header {padding-top:0px !imporant}
    }

    I hope my explanation is clear and helpful! Let me know if you need clarification.

    Best regards,
    Sarah

    • This reply was modified 6 years, 11 months ago by Sarah.
    #786687

    Hey Sarah!

    That was super informative. This will definitely help me moving forward on other requests. I really appreciate the detail of your explanation. You rock!

    For the second option B (CSS to apply to the homepage.)

    @media only screen and (max-width: 767px) {
    .responsive #top:not(.home) #main) {
    padding-top: 80px !important;
    }
    #top:not(.home) #header {padding-top:0px !imporant}
    }

    , with this CSS, thats what I want to do! But I just tried the CSS and it looks like the images didnt move away from the header.

    Could you help?

    Thanks!
    Chris

    #786864

    Hi Chris!

    Whoops, looks like a parenthesis mistakenly got put in there. Sorry!

    Can you try this one instead? (I edited my previous post, too.)

    @media only screen and (max-width: 767px) {
       .responsive #top:not(.home) #main {
          padding-top: 80px !important;
       }
       #top:not(.home) #header {padding-top:0px !imporant}
    }

    Best regards,
    Sarah

    #786892

    No worries! This is perfect.

    Thanks again for helping me and not only giving me a super helpful rundown on how this works in the first place. You rock!

    #786929

    You’re welcome! We’re happy to help. 
    Let us know here in the forums if you need assistance with anything else.
    Cheers!
    Sarah

Viewing 15 posts - 1 through 15 (of 15 total)
  • The topic ‘Make fullscreen images scaled differently on mobile’ is closed to new replies.