My website is not being responsive and not resizing.

Question

I could really use some help, I have created my website http://hayleyryan.com/ and I can not get it to re-size to a smaller browser window or smaller device.

I have included <meta name="viewport" content="width=device-width, initial-scale=1"> at the top of the document, I have also set everything to percentage widths. I have looked through all my CSS for anything that could be the cause- I can not find anything. It was working fine until I removed the meta tag and later put it back.

Any help would be appreciated, thanks.

score 3 · Answer 1 · edited May 23 '17 at 11:52

3

Unfortunately, by just adding <meta name="viewport" content="width=device-width, initial-scale=1"> you cannot make a responsive webpage. It require a lot of other things. Have a look at another question on stackoverflow which maybe helpful: How to implement responsive web design and its best practices

edited May 23 '17 at 11:52

Community

1
1

answered Dec 18 '15 at 08:50

Raag Singh

515
1
4
10

Hi Raam, Thanks for your answer! I apologise for using the wrong terminology- I understand I need to implement breakpoints to re-align the content. I realise 'responsive' is not the right word now- sorry! I am still quite new to a lot of these terms. – hayleyshaye Dec 18 '15 at 09:12

score 1 · Answer 2 · answered Dec 18 '15 at 09:29

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases

Lear this . Responsive Web Design - Media Queries

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

/* Extra small devices (phones, less than 768px) */
    /* No media query since this is the default in Bootstrap */

    /* Small devices (tablets, 768px and up) */
    @media (min-width: @screen-sm-min) { ... }

    /* Medium devices (desktops, 992px and up) */
    @media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

score 0 · Answer 3 · answered Dec 18 '15 at 08:55

0

Raam Singh is right, however for your specific case I would like to add, that your "curtains" ul is absolutely positioned. You should either make it not absolute or add "width: 100%;".

Also your "desk" image should have "width: 100%;" if you want it to be resizable.

answered Dec 18 '15 at 08:55

Laurynas

81
1
3

Thanks Laurynas, I think the position must be a style left over from I plugin I deleted earlier. Thank you! It fixed my problem. And thanks for the tip, I will fix the desk image too. :) – hayleyshaye Dec 18 '15 at 09:16

score 0 · Answer 4 · answered Dec 18 '15 at 11:06

0

please check the website before start the responsive

http://getbootstrap.com/css/#grid-options

answered Dec 18 '15 at 11:06

Vignesh V

31
4

stackoverflowisbestideas · Answer 5 · 2022-05-16T18:54:01.517

i tried all anwser but still my website is not responsive i'll upload my html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MNT CAB V2</title>
   <link rel="shortcut icon" href="Final sticker MNT.png" type="image/x-icon">
    <link rel="stylesheet" href="style.css">
    <div class="logo">
        <img src="Final sticker MNT.png" alt="logo">
    </div>
</head>
<body>
    <nav>
        <a href="index.html">Home</a>
        <a href="#ABOUT">About</a>g
        <a href="#SERVICES">Services</a>
        <a href="#GALLARY">Gallary</a>
        <a href="#CONTACT">Contact Us</a>
        <div class="animation start-home"></div>
      </nav>

this is my html its not responcive D:

This does not really answer the question. If you have a different question, you can ask it by clicking [Ask Question](https://stackoverflow.com/questions/ask). To get notified when this question gets new answers, you can [follow this question](https://meta.stackexchange.com/q/345661). Once you have enough [reputation](https://stackoverflow.com/help/whats-reputation), you can also [add a bounty](https://stackoverflow.com/help/privileges/set-bounties) to draw more attention to this question. - [From Review](/review/late-answers/31788754) — Bruno Rohée, May 20 '22 at 12:37

My website is not being responsive and not resizing.

5 Answers5