Help
cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
Copilot Lvl 2
Message 1 of 2

Making my website responsive for all devices

Solved! Go to Solution.

Hi there,

 

I recently decided to redesign my website and as a result I'm struggling galore...

 

Apart from the fun I've had making it something completely different I'm having problems with additional coding in some aspects. I know a bit of css and it has helped a lot (although I'm failing to get my social media widgets icons to be in the centre on tablet view, so frustrated) but I think I may be in need of media query code for my website to be responsive. I've tried reading on it and even watching youtube videos on it but i'm just not getting it.

 

I'd really appreciate some help as I need to be done with my website by the end of November so I can move on to other more important things. I'd really just like it to be responsive with all the devices so it's not a crappy site.

 

Thank you in advance x

1 Reply
Solution
Commander Lvl 2
Message 2 of 2

Re: Making my website responsive for all devices

Hi @SMakgare,

 

CSS's media queries are indeed a very good starting point! You can read more about them here: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp .

 

It basically boils down to this:

 

@media ([PROPERTY: max-width/min-width/etc.]: [VALUE in px/vh/vw/em/etc.]) {
     [YOUR CSS]
}

A practical example might be:

 

 

@media (min-width: 200vh) {
    .myElement {
        background-color: red;
    }
}

The CSS above turns the elements' background color red if the minimal width of the viewport is or is greater than 200vh (which happens to be twice the height in this case).

 

 

But there are many more properties you can use, just look at the link provided. Select a property, fill in a value and then define regular CSS rules inside the media query that apply only if the condition is true.

 

Another possibility would be to use something like Bootstrap.

 

Good luck!


- Mark