Struggling to locate text within the confines of the meta viewport

So I'm new to this whole blogging thing and I wanted to make sure my site was responsive. I added the meta viewport tag, but when I tested it out on Google Chrome with different window sizes, my text just disappeared! Here's a snippet of the CSS and HTML code that's causing me trouble:

.hero{
        background-color: firebrick;
        display: flex;
        justify-content: center;
    }

    .container{
        display: flex;
        justify-content: center;
        width: 1000px;
        padding: 10px;
    }
<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <link rel="stylesheet" href="C:/Users/MSI/Documents/programacion/html_y_css/estilos_test.css">
    <meta name="viewport" content="width=device-width, initial-scape=1.0">

</head>
<body>
    <section class="hero">
        <div class="container">
            <article>
                <h1> ¿quien soy?</h1>
                    <p> araragi koyomi: estudiante de bioingeniería . amante de la naturaleza; me gustan
                        las plantas y los animales en general, amo las matemáticas, me siento cómodo en lugares silenciosos y disfruto de ver anime,
                        salir con amigos, el queso, el vino y el chocolate, me encanta la programación y planeo enfocar mi carrera en programación 
                        tanto como pueda.
            </article>
            <figure>
                <img class="image-item" src="C:\Users\MSI\Documents\programacion\html_y_css\imagenes\viajes\yo_laguna.jpg" alt="no se encuentra una imagen" width="400px">
                <small> Figura: viaje a la laguna del otún</small>
            </figure>
        </div>

    </section>
</body>
</html>

I tried using max-width to fix it, but then even the body of the page got squished in. Does anyone know how I can solve this issue? Any help would be greatly appreciated. Stackoverflow won't let me upload images, unfortunately.

Answer №1

The reason for this issue is due to the fixed width you have set at 1000px. This fixed width does not adjust according to different device sizes, as it will always stay at 1000px. To fix this problem, consider using percentages instead. Percentages allow an element to adapt its width relative to its parent element. Another option is to utilize viewer width which sets an element's width based on the user's screen or viewport size. Below are examples of how you can implement both solutions:

Using Percentage:

.container{
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 10px;
}

Using Viewer Width:

.container{
    display: flex;
    justify-content: center;
    width: 100vw;
    padding: 10px;
}

I hope this explanation helps clarify the issue for you.

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

What is the best way to activate the cube portfolio using custom jquery?

Is there a way to activate the Cube portfolio filter using custom JQuery? see image here For instance: In my Cube portfolio slider, I have over 20 projects featuring different technologies. When I slide the div, I want the filter to be activated based on ...

Troubleshooting Autocomplete User Interface Problems

I am currently working on a website user interface and I have encountered an issue specifically in IE7. When searching for a company, the display is not showing up correctly, as demonstrated in the image below. This problem only occurs in IE7, it works fi ...

Tips for maintaining table elements in place using JavaScript

My goal is to keep the tags within the table fixed when printing. The code I've written functions correctly in View mode, however, when printed using JavaScript, if one of the columns is too large, the rest of the columns get displaced. I want all col ...

Is add1 missing from the DOM? Learn how to include it

Having an issue with Java-Script and an HTML form. The scenario is that there's a main form with an "Add" button, which when clicked should display a second form. Next to the second form is another button labeled "Add1," which ideally should trigger ...

Using the bootstrap container-fluid to create additional space on the right side

I've been trying to remove the right side padding in my container-fluid without success. There seems to be extra space where the red lines are marked. I have attempted various methods to fix this issue but I can't seem to identify where this ex ...

Is there a way to access the body html element within a template in vue.js?

I'm struggling to add styles to the body element of my HTML page. It seems like I can't access it directly from the template because there's another body element nested inside the main body. Even when I try to change the style using JavaScri ...

What is the best way to assign the task of constructing to a specific method?

Currently working on a Groovlet and trying to streamline the HTML building process by utilizing a method, but running into some issues. Below is a snippet of my code: def pages = [page1: html.p("page1")] html.html { p("p") pages[page1] } The expected ...

JavaScript source control tool

Is there a Java-based version of GitHub? I am interested in developing a dynamic application using HTML5 and Javascript, and had the thought of integrating Git to monitor data changes. Therefore, I am curious if there exists a JavaScript adaptation of a G ...

Click here to view the latest Poll Results!

I have implemented AJAX to display poll results on the same page without requiring a refresh. An issue I am facing is that the poll section occupies about three times more space than the results. This causes an inconvenience for users who vote, as they ma ...

What is the best way to retrieve an element made in a different function within JavaScript?

I have a main button on the screen and when I click that button, it generates two more buttons. These additional buttons should each have their own functionality and click events, but since they are created within a function without global variables or ids ...

How to customize the page background color in Next JS

I am currently working on a project using Next Js and have encountered an issue. I have a global.css file set up in the project, but I need to change the background color of a specific page without affecting the rest of the project. Although I have tried u ...

Is there a way to detect when a CSS background image has finished loading? Does an event trigger upon completion?

I am facing an issue with my sidebar widget where there is an image background in place. On top of this, I have a search input form but I don't want the input to display until the image has fully loaded. Is there a way to add a load event handler to ...

How can you exhibit various images without relying on the <img> tag?

Is there a more efficient way to display over 500 images from a folder on an HTML page without the need to manually write out each img src tag? I have searched online for solutions, but most suggestions involve using PHP or "glob", which I am hesitant to ...

Styling radio buttons with customized CSS borders

I'm attempting to style some radio buttons with a bold red border, but I'm having trouble getting it to display correctly in the latest versions of Firefox and Chrome. It works fine in IE9/IE8. For each input element that is required on my form, ...

Employ the $scope.go() method within a function written in JavaScript

I am working with some HTML code that looks like this <body ng-app="app" ng-controller="IndexCtrl" id="indexBody"> <h1>test</h1> </body> Next, in a JavaScript function, I retrieve the scope like so function myFx() { ...

Clicking on the Edit button does not result in any changes to the HTML on the page following a table

My current setup involves a button that is supposed to toggle between 'Add New User' and 'Update User' elements when clicked. However, it seems to work only when the table has not been filtered. Once I apply any kind of filtering on the ...

Optimizing jQuery Dialog for Different Window Sizes

I am currently developing a responsive website and facing a challenge. I need to implement a popup for window sizes smaller than 480px, but on desktop screens, the content should be visible without being inside the popup. I want to avoid duplicating the co ...

Issue with bootstrap: the navbar highlight and anchor href are not functioning as intended

I'm currently working on creating a Navbar and implementing the navbar highlighting feature using the active bootstrap class. Below is the code I have tried: <!DOCTYPE html> <html lang="en"> <head> <!-- Bootstrap CSS ...

Utilizing HTML/CSS to display text and an image positioned above a sleek navigation bar

I am struggling to align a logo on the left side of my website, with text on the right next to it, all placed above the navigation bar. Despite my efforts, I just can't seem to get them positioned correctly! CSS .headerLogo{ float:left; marg ...

Capture a snapshot of a webpage that includes an embedded iframe

Currently, we have a nodeJS/angular 4 website that contains an iframe from a third party (powerBI Emebdded). Our goal is to develop a feature that allows the end user to capture a screenshot of the entire page, including the content within the iframe. We ...