Need some help for a Mobile Responsive Website

Question

My website is www.dreamzabroad.in,

I want to make it mobile responsive. Like when you visit the homepage the slider is placed beneath the header logo, i want to push it down and make the heading tags fit to the mobile display?

Answer 1

Use Bootstrap media query or simply use custom media CSS properties.

for bootstrap you can simply use CDN link like as below in your index style tag to use CSS without downloading in your project and then just apply available classes in your code.

<link rel="stylesheet" href="./contact_files/bootstrap.min.css" />

Add below Media CSS according to your device width in style tag of your index or main achieve responsiveness.

@media screen and (max-width: 600px) {
  body {
    background-color: Yellow;
    color: Pink;
  }
}

@media screen and (max-width: 711px) {
  body {
    background-color: Green;
    color: Red;
  }
}

References:

• https://www.geeksforgeeks.org/bootstrap-media-queries/

Answer 2

One of the simplest ways to make your website responsive is to use Bootstrap. Use this link as a starting point:

http://getbootstrap.com/getting-started/

You will need to include the bootstrap files on your website and use their classes which you will find on their website in order to make your content change widths and fall under each other on different screen sizes.

Answer 3

You want to look into media queries , which will allow you to change your CSS based on certain conditions.

If this is too daunting you can simply use a framework such as Bootstrap which has done the groundwork already, you just need to add the relevant documentation.