Changing Mobile layout general questions.

[buckycore]

I just have a general question about mobile layout vs. Desktop. I know your themes are built around the responsive design philosophy, and for the most part, I see this working out. However, I know I’ll need to make changes to the mobile side, especially with the Swift Slider. Is this possible? I have no issues working in CSS. I would just need to know the classes and/or IDs of the divs and such. I have a staging server, so I don’t mind the risk of tinkering. Also, in general what are the best practices in changing the layout for the mobile version in CSS? Do you have a list of specific classes/IDs that are common when making changes?

Lastly (this is more of product related question). Do you have a resource comparing the differences in your various themes? For the most part I love Atelier, and can many web site projects growing from it. But I’m also enchanted with the looks of Joyn, and was wondering if there were major differences at all. Or if one were more advanced than other, or the same.

Thank you in advanced for both questions.

[David Martin – Support]

Hi,

1) Please use the Chrome web inspector to view the output classes and ID’s for the slider.

It’s best to put these CSS changes into the Theme Options => Custom CSS or into an active child theme to make sure they are safe against updates.

2) Atelier is slightly more powerful, both are based on the same Swift Ideas Framework but Atelier is newer. The largest difference(s) would be the visual difference on the front-end and the UX.

Thanks.

[buckycore]

Ok, cool. I figured that was the case, but did I find some earlier posts where you suggested

.swiper-slide {
    background-size: contain!important;
}

and

@media only screen and (max-width: 767px) {
.swiper-slide .caption-content h2 {
    font-size: 18px!important;
    line-height: 34px!important;
}
a.sf-button {
    font-size: 10px;
}
}

to help re-size the slider for mobile devices and such. In the case that this doesn’t quite take care of my issue, is it possible to have a group of alternate layouts for mobile devices, and perhaps set DNS records to have m.featheredoutlaw.com point to them?

[David Martin – Support]

Hi,

The elements within the Page Builder can have their visibility set per screen size.

For example you can add a Slider to the page and set it to only display for mobile, or tablet or desktop or any variation. Take a look at this screencast: http://d.pr/i/10g29.

Thanks.

[buckycore]

Ok, thank you for that information. That’s an amazing feature, and I’ll be using that to it’s fullest. However, the slider is one that I selected in the Meta Options under Page Header/Slider. But from what you’re saying, you’d suggest I’d replace that with a Swift Page element one so I have more control on it’s layout? After this last question is answered, I think I’ll be good.

[David Martin – Support]

@buckycore – yes I think that would fit your needs better then inserting it via the meta options. You will have more control this way.

Cheers,
David.

[buckycore]

Great! Knowing how I can play around with layouts per device is yet another awesome thing I’ve learned about this theme. Thank you for all the answers (I marked this as resolved)

[Rui Guerreiro – SUPPORT]

Great. Thanks David.

-Rui