Make fullscreen images scaled differently on mobile - Support

Viewing 15 posts - 1 through 15 (of 15 total)

Author

Posts
April 27, 2017 at 4:53 am #783764

ccyran
Participant

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:

Zach Wilson

Galaxy View

Password to view the pages in the private content!

Thanks!

April 27, 2017 at 7:40 am #783831
John Torvik
Inactive Moderator
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
April 27, 2017 at 8:56 pm #784200

ccyran
Participant

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

April 27, 2017 at 9:09 pm #784205

ccyran
Participant

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.

April 28, 2017 at 6:20 am #784298

Sarah
Inactive Moderator

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

April 28, 2017 at 5:44 pm #784734

ccyran
Participant

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?

April 29, 2017 at 7:08 am #784894
Sarah
Inactive Moderator
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
April 30, 2017 at 9:09 pm #785413

ccyran
Participant

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

May 1, 2017 at 7:11 am #785539

John Torvik
Inactive Moderator

Hi,

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

Best regards,
John Torvik

May 2, 2017 at 12:55 am #786054

ccyran
Participant

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.

May 2, 2017 at 4:03 pm #786478
Sarah
Inactive Moderator
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 7 years, 7 months ago by Sarah.
May 2, 2017 at 8:40 pm #786687

ccyran
Participant

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

May 3, 2017 at 4:45 am #786864
Sarah
Inactive Moderator
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
May 3, 2017 at 5:58 am #786892

ccyran
Participant

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!

May 3, 2017 at 7:04 am #786929

Sarah
Inactive Moderator

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

Posts

Viewing 15 posts - 1 through 15 (of 15 total)

The topic ‘Make fullscreen images scaled differently on mobile’ is closed to new replies.