Tips for creating a completely responsive design

I am trying to make my page fully responsive without any scroll bar, but setting the height to 100% is not working. Below is the CSS code I have tried:

html {
    height: 100%;
    width: 100%;
}
body{
width:100%;
hight:100%;
margin: 0;
padding:0;
}
.main{
    background-image: url("http://www.ghadaalsamman.com/new/images/bg.gif");
    background-repeat: no-repeat;
    background-position: center center;
    margin: 0;
padding-top: 30vw;
background-size: 100%;
}
.marquee {
    display: block;
    position: relative;

width: 51vw;
margin: auto;


}
marquee{
width: 100%;
margin: auto;
display: block;
}
#btn1 {
    background: url("http://www.ghadaalsamman.com/new/images/enter.gif") no-repeat scroll center center ;
    display: block;
    height: 53px;
    margin: 0 auto;
    position: relative;
    width: 50%;
background-size: 100%;
margin-top: 33%;
margin-bottom:1%;
}
.button {
    padding: 5px;
}
.container {
    display: block;
    height: 100%;
    margin: 0 auto;
    max-width: 960px;
    position: relative;
}


@media screen and (max-width:500px) {
    #btn1{
        background-size: 100% auto;
    }
}
<div class="main">
    <div class="container">
        <div class="marquee">
            <marquee scrollamount="3" direction="right" dir="ltr">
                 <h3 align="center" style="color:#804000;font-size:large;margin-top:0px;"><strong>  
    <img height="auto" width="200%" src="http://www.ghadaalsamman.com/new/images/image21.png">
        </strong></h3>

            </marquee>
        </div>
<a class="button" id="btn1" href="http://ghadaalsamman.com/new/site.html"></a>

    </div>
</div>

htmlcss

Answer №1

Here is the issue

body {
    width: 100%;
    hight: 100%;  <----- 'hight' needs to be corrected to 'height'
    margin: 0;
    padding: 0;
}

Replace it with this

body {
    width:100%;
    height:100%;
    margin: 0;
    padding:0;
}

Answer №2

Your image's aspect ratio could pose a challenge, in my opinion.

Since you've switched to using vw units, consider exploring the use of vh units and a max-width property as well.

The square-like appearance of your image suggests that the container should be slightly reduced to ensure visibility. With the utilization of vw units, I suggest employing display:flex to easily center your container:

Check out a DEMO of this concept

Here is the updated CSS:

html {
    height: 100%;
    width: 100%;
}
body {
    width:100%;
    height:100%;/* UPDATED*/
    margin: 0;
    padding:0;
    display:flex;/* UPDATED*/
}
.main {
    background-image: url("http://www.ghadaalsamman.com/new/images/bg.gif");
    background-repeat: no-repeat;
    background-position: center center;
    margin: 0;
    padding-top: 15vh;/* UPDATED*/
    background-size: 100%;
    width:100vh;/* UPDATED*/
    margin:auto;/* UPDATED*/
    max-width:100vw;/* UPDATED*/
    overflow:hidden;/* UPDATED hide marquee*/
}


.container {
    display: block;
    height: 100%;/* unnecessary if parent has no specified height */
    margin: 0 auto;
    position: relative;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Customize the text color across all sections of the application in ExtJS 6

I am looking to update the text color across my entire application. Currently, it's gray and I would like to change it to black. The platform I am working with is classic. I came across this code snippet in CSS: .x-body { margin: 0; -webkit-f ...

cssextjssassextjs6extjs6-classic

"Utilize the addEventListener function in combination with the 'for' keyword to

I have been working on a Chrome extension where I use a "for" loop to change the display style of elements named "mode" to none, except for one which should be displayed at the end of the loop. However, whenever I click on the button to activate it, my tab ...

javascripthtmladdeventlistener

What steps can I take to ensure the browser only shows the page once it has completely loaded?

I find it frustrating when webpages load slowly and you can see the process happening. In my opinion, it would be more satisfying to wait until everything is fully loaded - scripts, images, and all - before displaying the page. This brings up two questio ...

javascriptcss

What is the best way to ensure buttons remain on the same line in Vue.js?

In a table, I have three buttons that are placed on top of each other when the data in the row is too long and expands the table. My goal is to keep these three buttons in one line regardless of the content length. <td class="text-xs-right"> <d ...

javascripthtmlvue.jsbuttonvuetify.js

What steps should be followed to direct the user to a different webpage after changing the index page name?

I'm in the process of creating a new website. The previous name of my website was home.html but I recently changed it to index.php. However, when I try to access the website, it keeps redirecting me to home.html instead of index.php. Can anyone offer ...

phphtmlwebindexing

Is it possible for a CSS code to be universally effective across all PHP files by setting style.css in header.php and then including header.php in each of the other PHP files?

Let me confirm, the code snippet from the header.php file is as follows: <link rel="stylesheet" href="style.css"> If I include the following code in every other php file: include 'header.php'; Will all the files have access to style.css ...

phpcss

React drag and drop feature now comes with autoscroll functionality, making

I am encountering an issue with my nested list Items that are draggable and droppable. When I reach the bottom of the page, I want it to automatically scroll down. Take a look at the screenshot below: https://i.sstatic.net/ADI2f.png As shown in the image ...

javascriptcssreactjsdrag-and-dropoverflow

jQuery problem causes page to scroll when button is clicked

Is there a way to smoothly scroll to the second section of the page when a button is clicked using jQuery? $('.home_scroll_btn a').on('click', function(){ var scrollPosition = $('#intro-home').offset().top; $( ...

javascriptjqueryhtmlscroll

JavaScript Image Swap

I tried implementing this script but it didn't work for me. I'm not sure what to do next, so I'm reaching out for help. The script is at the top of the page, followed by a picture with an id that I'd like to change when a button below i ...

javascripthtmlcss

There are two different ways to set a hyperlink in HTML. One method is by using the href attribute, where you provide the URL inside the quotation marks. The other

While browsing, I stumbled upon this interesting piece of JavaScript code: onClick="self.location.href='http://stackoverflow.com/'" I incorporated this code into my website, and it seems to have the same effect as using the href attribute. Sin ...

javascripthtmlonclickhref

The CSS design morphs as I adjust the browser size. Despite my limited coding experience of just a few weeks, I've encountered a challenging obstacle

Hi there, I've been searching on W3 and various other sources but haven't found a solution to my problem. I have managed to create the layout I want, however, it starts falling apart when I resize the browser window. I'm relatively new to co ...

htmlcss

Incorporating A Full-Fledged Office Word Editor Into My Web Application

In our web project, we are looking to integrate a feature that allows users to create, edit, and save their word documents for reporting purposes. While Microsoft Office offers an online option here, it seems limited to working within the Microsoft OneDriv ...

htmlms-wordms-officetext-editorrich-text-editor

When incorporating an array into a span tag, only the final string is being shown by the loop

I need assistance with changing the content of a span tag every 1.5 seconds, but currently it only displays the final word in the 'list' array. Below is my JavaScript code: var list = [ "websites", "user interfaces" ]; setInterval(fun ...

javascripthtmlarraysloopsfor-loop

CSS Alignment in React with Material UI

Is there a way to align one button to the left while centering the other two? To see an example in Codesandbox, please visit HERE <DialogActions sx={{ justifyContent: "center" }}> <Button>Left</Button> <Button on ...

cssreactjsmaterial-ui

Using HTML and CSS to create a sticky overlay effect

I'm currently working on developing a calendar application but facing some challenges with the layout structure. The main aim is to create a scrollable div featuring timeline overlays. This is my progress so far: .calendar { position: absolu ...

htmlcssflexbox

Utilizing JavaScript XHR to Organize Data Retrieved from an API

I have successfully connected FDA's Drug API with XMLHttpRequest() and now I need help sorting the fetched data in ascending order based on its GENERIC NAME (results["open_fda"].generic_name). Importing all arrays from the API seems impractical, even ...

javascripthtmljson

Using HTML5 with Thymeleaf: default placeholder value displayed in an input field of type number is 0

As I work on my Spring Boot application, I'm developing a simple HTML form with Thymeleaf integration. One specific line in the form reads as follows: <input type="number" step="0.1" min="0" max="10" **th:field="*{rating}"** ...

htmlspring-bootspring-mvcbootstrap-4thymeleaf

My Drop Down menu is not displaying the <a> in two lines, and I'm having trouble getting it to show correctly

Hello there! I've encountered an issue with my drop-down menu. The text within the <a> tags is too long to fit on a single line, and I'm struggling to make it display in two lines instead. I've been experimenting for the past couple o ...

htmlcss

The Hamburger Menu in the Bootstrap Navbar is failing to collapse

My website uses Bootstrap v5.3 and I've added a navbar, but the hamburger icon is not collapsing on mobile devices when clicked. Can someone please review my code to see if there are any issues? I can't figure out what's wrong. <!DOCTY ...

htmlcssbootstrap-5

Error: content within v-html directive not displaying as expected

The v-html content is not rendering correctly for me. Interestingly, when I remove the v-html in the first list item, it works fine. Take a look at my code below: <div> <br> <li v-html="`a`"> <ul> <li ...

htmlvue.js