Help with the responsive part…

Basic support is open to all members of Volatyl Themes but what about those who need a little more? That's what Volatyl Themes subscriptions are for. The Priority Support subscription gets you more detailed, personal support while the Advanced Development subscription not only includes Priority Support, but also grants you access to premium content only seen by subscribers. This premium content will help you take your Volatyl websites to the next level with advanced development techniques, integration tips, and more information on how to really put Volatyl to use. Check out the subscriptions!

The Affordable WordPress Framework Forums Basic Support Child Theme Development Help with the responsive part…

This topic is: resolved

This topic contains 10 replies, has 3 voices, and was last updated by  sdavis2702 5 years ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #3975

    Peninah Adler
    Participant
    Post count: 5

    I’m using volatyl on a site I’m working on (link) and really enjoying it.
    However, it’s the first time I’ve made a site responsive, so I’m having trouble working out what to do when parts of my design don’t “respond.”

    Do you have any recommendations as to where to direct me to learn more? I can work it out if I know where to start!

    #3985

    sdavis2702
    Keymaster
    Post count: 72

    Hi! First of all, your design is great. Volatyl is still new so I’m THRILLED to see what you’ve done with it. Amazing work for sure.

    As for the responsiveness, you ask a great question and unfortunately, it’s a tough one to answer. Not because it can’t be answered… but it really has to be taught.

    The first thing to know is that your site doesn’t have to be responsive if you don’t want it to be. You can use the Volatyl Options General Settings to turn off the framework responsiveness.

    Assuming you do want your site to remain responsive, I see by looking at your stylesheet that you have the right idea with the responsive section of CSS at the bottom of your file. It just needs a very important line of CSS added at each “breakpoint.” Let me explain.

    Your site has plenty of CSS written for it… just regular CSS in the stylesheets. That CSS does simple stuff you seem to be familiar with… element alignment, link colors, etc. The way responsiveness works is very simple… you just choose a specific pixel width at which new CSS rules are written if that viewport width gets narrower than that width. So here’s an example stylesheet that has normal CSS at the top and responsive CSS at the bottom:

    /* Default CSS */
    
    body {
        background: red;
        font-size: 15px;
    }
    body a {
        color: white;
        text-decoration: underline;
    }
    body p {
        padding: 20px;
    }
    
    
    /* Responsive CSS */
    
    @media screen and (max-width: 600px) 
    {
        body {
            background: yellow;
            font-size: 18px;
        }    
        body a {
            color: blue;
            text-decoration: none;
        }
    }
    

    Now that’s very basic and silly looking CSS but it’s good for this example. What we have going on here is your site’s body, links, and paragraphs being styled by default. When the page loads on any device, that’s the CSS it’ll use… the “Default CSS” as I’ve labeled it.

    Below that, though, a media query or “breakpoint” was used to say, “when the viewport is narrower than the width of 600px, apply my new CSS rules.” Or, “the following CSS only applies up to a maximum width of 600px.”

    Take note that the media query has its own brackets.

    @media screen and (max-width: 600px) 
    {
        /* regular CSS goes here */
    }
    

    So, inside of your media query, you write new CSS that applies to the screen size specified by your breakpoint. In my example, I felt that the red background of my site now needed to be yellow if the viewport width was 600px or less. So I wrote a new rule for the body that would override the default rules. I did the same thing with the body links.

    Note that I didn’t do anything to the body paragraphs. Media query CSS inherits default CSS. So if you override it, you’re writing responsive CSS. If you don’t override it, everything stays the same.

    The reason why your new content is not responding is because it’s using regular, what I’m calling “default” CSS. The CSS you’ve written for the site while it’s wider than 960px is just fine. But since you’ve added custom elements, you now have to write responsive CSS in your child theme’s style.css file at the bottom to make the necessary adjustments to the very elements you’ve added and styled on your own.

    So this here (screenshot) needs to be wrapped in a media query specifying the exact pixel width you’d like for your new CSS rules to take place.

    There are no limits on media queries. The default stylesheet for Volatyl core has 4 breakpoints that will always apply unless you turn off the responsiveness. Those points are 960px, 850px, 768px, and 480px. To see that CSS, check out the responsive.css file in the root of the volatyl folder.

    You can very well build child themes that stay within the limits of Volatyl’s responsiveness. But say you decide to build a feature box that holds two columns side-by-side from floating them both left and giving them both 50% widths. There was no way I could predict that. So now you have to write the responsive CSS.

    It’s always best to make your child theme responsive breakpoints the same as my core breakpoints. So at viewport 960px, everything will be fine and your two columns will maintain their widths and position. At 850px, same thing. But what about 768px? That’s where I drop the sidebars below the content and change the nav menus to the responsive menus.

    There, you might want to write responsive CSS for your columns that reverses the floats (‘float: none’) and gives them a full width (‘width: 100%’). You literally just reversed the default CSS your wrote for them.

    At 480px, nothing will change… they will continue to use their 768px CSS… unless you say otherwise. You may want to add padding once the screen is that small. So in your 480px media query, you can add new CSS for the padding.

    Does this make sense?

    So the bottom line is that you write CSS for each breakpoint you create… and you can create any breakpoints you want. You can add new CSS at breakpoints and you can override default CSS at new breakpoints.

    Your best bet will be to copy all of the responsive.css CSS from Volatyl, place it in the bottom of your child theme’s style.css file, delete the CSS sitting inside of each media query, and have fun building a completely custom responsiveness tailored to your design… the right way to do it.

    I hope this helps!

    #3984

    sdavis2702
    Keymaster
    Post count: 72

    Also, it should be understood that while responsiveness can be applied to anything, best practice is to write your default CSS with responsive flexibility in mind. So I like to use as few defined widths as possible in my default CSS… that means I have less to override in my responsive CSS. So your approach to a custom design is key and must be well thought out!

    #3983

    Peninah Adler
    Participant
    Post count: 5

    Wow, this is AMAZING!!! This is more than helpful; it’s perfect. I know there will be a learning curve, but that’s ok. Had that with WP itself a few years ago, too. Your post explains how I should start, which is what I need. Once I’m started I can google around and eventually…I’ll get there πŸ™‚

    I’m really enjoying Volatyl. I’ve been a Thesis user for a few years, but Volatyl looked just right for my needs/skills right now. So far, I’m thrilled!

    #3982

    sdavis2702
    Keymaster
    Post count: 72

    So glad to hear that! I know the learning curve can be tough for all of this stuff… especially getting grips on what to learn, what doesn’t matter, what knowledge is general, and what’s specific to a certain platform you’re using. I’ve went through it all myself as I was friends with Google just like you.

    So my aim with both Volatyl and my support is to help people along that process in a faster, more effective way than what I had. Responses like yours keep me motivated do it!

    Please let me know if you run into any snags along the way. Here are the two exact articles that got me started. They may be of some use to you too as one of them includes some CSS for making sure images, videos, etc. are responsive as well.

    http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries and http://webdesignerwall.com/tutorials/responsive-design-in-3-steps

    Happy coding! πŸ˜€

    #3981

    Peninah Adler
    Participant
    Post count: 5

    Yeah, it gets confusing. But the web community is so friendly and open and passionate about their work, so you really can learn online if you try.
    Thanks for the links, they look great! I’m sure I’ll be back in a few days as I tackle this.
    Thanks again for the first response; you really went above and beyond what can be expected from a support forum, IMO!

    #3980

    sdavis2702
    Keymaster
    Post count: 72

    Most of the time, that (great support) is more important than the product itself. πŸ˜‰ Good luck.

    #3979

    Peninah Adler
    Participant
    Post count: 5

    Thanks to your help and links, I’ve been able to “responsify” most elements on the site that I added. (yippee!)
    Now I have a question. On my inner pages (sample), I have an image that has the page title. I need to replace that with a smaller version, so that the title doesn’t get too small to read when re-sized.

    I have the images added with functions. Should I change the functions to a single container, with background images in css (page specific) so that I could replace the background images at smaller browser sizes?

    Similarly, for the home page, I have a slider with text. Should I replace the whole thing with a special, smaller version at smaller sizes?
    Thanks!

    #3978

    sdavis2702
    Keymaster
    Post count: 72

    Great questions. Here’s what I would do.

    For the image titles, I would first re-evaluate that approach. The title of internal pages is the most important element on those pages. You’re going to take an SEO hit using images instead of descriptive H1s there. Also, doing that eliminates your responsive question as the text will just remain the text.

    If you do choose to use images, though, and you’d like to switch to a different image below a certain screen size, what I would do, and some kind of frown upon this but they’ll live, is place both images in your function… seriously the HTML for both… just one on top of the other. But give the smaller image a default CSS of display: none; so it can’t be seen.

    Leave the main, big one exactly as it is now with its corresponding default CSS. Even let it resize for a little bit. Then, at a breakpoint where the title is getting a little tough to read, display: none; that image and display: block; the smaller image. That’ll simply hide the big image and display the smaller one.

    You can also do what I described above but instead of having a smaller image, just use text. Again, though, I don’t think it’s a great idea to use HTML images for any of this. I think you would be better off semantic markup.

    As for the slider, you have to ask yourself if it really needs to be there. Sometimes in responsive design, things that are cool for desktop versions are 100% pointless on mobile. With that being at the top of the page on mobile, is it really a worthy pit stop for your visitors as they inch down the page with their thumbs? If it’s about the information text on the slider and it’s too important to let go, does the responsive version really need the images? Can the text itself be display getting straight to the point?

    If so, just like the title solution, consider hiding the slider and display the static text for mobile visitors.

    Does that make sense?

    #3977

    Richard O’Brien
    Participant
    #3976

    sdavis2702
    Keymaster
    Post count: 72

    No problem! They’re definitely helpful articles.

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

You must be logged in to reply to this topic.