CSS driving me nuts. Can't get Desktop and Mobile (responsive) straight

  • Resolved WordThePress

    (@wordthepress)


    9 years, 2 months ago

    I’m building a new WordPress-website and even though there’s plenty of work left to do (and I did do my research), I’ve been stuck on trying to get the CSS straight, so the homepage is being displayed on both desktop and mobile in a correct and decent way.

    So far, I’ve been succesful for over 50%, but there’s still work left to do (it’s driving me nuts right now).

    Website: https://bit.ly/1L6b47u
    (Id like to keep the (domain)name of this website low profile on www.remarpro.com so it can’t be Googled)

    Username & password: https://oi61.tinypic.com/2cfa9zq.jpg

    I’m using the Revolution Slider-plugin on top of the homepage to embed a YouTube-video. The thing is though, this only works for desktops. If you were to visit the website on a mobile device, the video is replaced (optional) by an image (or even nothing).

    There’s this CSS-trick inside the Revolution Slider-plugin, which lets you create 2 slides. Both slides will then recognize which device is being used and show the right slide for the right device.

    Slide 1: Desktop (shows video on top)
    Slide 2: Mobile (shows black and white background-picture with logo on top)

    Seemed like a great alternative solution, since you would be able to fully control the second (mobile) slide (instead of using the normal way with lesser options).

    I rebuild the theme (from scratch) two times now to try and figure out what causes the website to fall apart when I decrease the width of my webbrowser (to have an idea what the mobile layout would look like)

    You could try and do the same. Just open the website (link above), login (image in comment below), visit the front page and decrease the width of your browser. In full size it’s exactly the way I want it to be. The more you decrease the width of the browser, the more ‘switch’-points occure:

    Full screen: https://oi58.tinypic.com/bgzles.jpg
    800px (https://oi62.tinypic.com/296jknn.jpg): from video slider to image-slider -> logo in slider is centered but too high
    767px (https://oi60.tinypic.com/i3ujbr.jpg): from website to mobile (header changes) -> logo in slider is centered but too high
    639px (https://oi58.tinypic.com/2r5sw3c.jpg): logo is being corrected to the center
    496px (https://oi61.tinypic.com/209gb47.jpg): mobile layout as being displayed on smartphones

    So basically, between switching/decreasing the width of the full screen website (in a browser) to the size of the mobile presentation – as being shown on a smartphone (496px and below) – there’s 4 steps (‘switch’-points if you will) in which the website transforms (tablet/notebook?). Two of those steps screw up the layout (logo being pushed up too high) and it ain’t just a matter of adding a margin-top to the image (as far as I can tell).

    QUESTION

    Is there anyone who’s capable of seeing what I’m missing? The structure for the full screen website (home page) is pretty much finished (as for the CSS). I’m also pretty satisfied with the structure of the 639px and 496px layouts.

    Anyone willing to have a look?

    Many thanks!

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hello,

    The “switch points” you are referring to are implemented in the CSS code as something called “media queries”. These query the media that you’re viewing the site with and respond with different CSS rules accordingly. Different themes/plugins/frameworks may use different sizes for their media queries and it appears that you simply have a case of multiple different media queries being introduced by multiple sources.

    What you’ll need to do is to isolate the media queries in your CSS and override them at either different break points or with rules that make for a more attractive transition between “steps”. A simple example of CSS with media queries might be:

    .logo {
    width: 400px;
}

@media screen and (max-width: 800px) {
    .logo {
        width: 350px;
    }
}

@media screen and (max-width: 600px) {
    .logo {
        width: 300px;
    }
}

    What this says is that the .logo class is to have a width of 400px unless the screen is 800px or smaller, in which case to make the class 350px. In the case that the screen is 600px or smaller, make the class only 300px wide.

    You simply need to sift through your CSS, identify and isolate the media queries and give explicit rules to override their default behavior.

    I hope this was helpful.

    Thread Starter WordThePress

    (@wordthepress)

    Thank you Kendall!

    I’m not that familiar with the right names and terminology, but that was exactly what I was looking for! I knew – by the look at some of the stylesheets – there were lines containing @media…, but I had no idea at all it was connected like that and they actually had a function.

    Couldn’t really find anything specific before when I used Google to look for similar problems. I do think I get the hang of it now, so you’re a life safer.

    Thanks! ??

    I’m glad I could help and thank you for marking the topic resolved.

    Cheers.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘CSS driving me nuts. Can't get Desktop and Mobile (responsive) straight’ is closed to new replies.

Tags