Challenges with layout and adaptability

Hello, I am looking for some assistance in making my HTML responsive and with positioning the items on my screen. Below is a picture of how I envision it to look:

Desired Look:

https://i.sstatic.net/84m3H.png

I have been experiencing issues with display grid, flexbox, and absolute positioning. Currently, my screen appears like this:

Current Appearance:

https://i.sstatic.net/q7pRV.png

Although it appears to be responsive, it breaks when viewed on different devices.

Here is the HTML code where I've created divs and included SVG icons. Can you verify if this is correctly structured?

    <div class="primaryinformations">

        <img src="example.png">

        <img id="trash" src="icons/trash.svg">

        <img id="edit" src="icons/edit.svg">

        <h1>Quirk, o Quokka</h1>

        <img id="tennis" src="icons/tennis.svg">

        <img id="medkit" src="icons/medkit.svg">

    </div>


    <div class="secondaryinformations">

        <img src="icons/dna.svg">

        <h4>Raça </h4>


        <h3>Setonyx Brachyurus</h3>

        <img src="icons/gender.svg">

        <h4>Sexo </h4>

        <h3>Macho</h3>

        <img src="icons/birthday.svg">

        <h4>Data de Nascimento</h4>

        <h3>17/07/2021</h3>

        <img src="icons/pill.svg">

        <h4>Fichas de Medicamento em Andamento</h4>

        <h3>2 Medicações em Andamento</h3>

        <img src="icons/tennis.svg">

        <h4>Atividades em Andamento</h4>

        <h3>3 Atividades em Andamento</h3>

    </div>

Below is the CSS I have written:

.primaryinformations img{

display: block;
margin-left: auto;
margin-right: auto;

}

.primaryinformations h1{

display: block;
text-align: center;

}

.primaryinformations #trash{

padding-left: 85vw;
position: absolute;
top: 15vw;

}

.primaryinformations #edit{

padding-left: 80vw;
position: absolute;
top: 60vw;

}

.primaryinformations #tennis{

padding-left: 33vw;
position: absolute;
top: 90vw;

}

.primaryinformations #medkit{

padding-left: 55vw;
position: absolute;
top: 90vw;

}

.secondaryinformations {

display: grid;
grid-template-columns: auto auto auto;
padding-top: 25%;

As for the Navbar, I plan to address it in future updates.

If there are any improvements or resources you can recommend for me to study responsiveness, please let me know. Thank you!

htmlcsspositionresponsivedisplay

Answer №1

flexbox: To properly set your properties, you'll need a flex container - referred to as the parent element - and its children, known as flex items. Make sure to make some adjustments to your HTML code accordingly.

     <div class="secondaryinformations">
    
           <article class="flex-container">
            <img src="icons/dna.svg">
            <div class="flex-container flex-column">
              <h4>Race </h4>
              <h3>Setonyx Brachyurus</h3>
            </div>
          </article>

          (more HTML code here)

        </div>

Your CSS can be easily manipulated using the flexbox pattern like this:

.flex-container{
    display:flex;
 }
.flex-column{
   flex-direction:column;
}

In terms of responsiveness, consider looking into @media queries here, as they play a significant role in achieving the desired final result based on different screen sizes.

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

Chrome-exclusive: Dealing with Overflow in Twitter Bootstrap Form Inputs

I've encountered a strange issue where datetime-local inputs exceed their boundaries on Chrome (tested on Chrome 35 x64 for Linux), but not on Firefox (29.0). Here's a screenshot demonstrating the problem in Chrome: chrome screenshot And here&a ...

javascriptcsshtmltwitter-bootstrapforms

What is the best way to create divs with no gaps in between them?

I am trying to create a div structure that resembles the one shown below, with one div on top and two divs under it. I would prefer not to use tables, ensuring there is no space between the divs, and if possible, having collapsed borders. _________ | ...

csshtmlcss-position

Make an image vanish once a table has been loaded using jQuery

I am striving to achieve a loading gif display upon button click and then vanish once the div loads with information from a jQuery function. Unfortunately, the page doesn't load, ruling out the use of the .load option. I am struggling to find an alter ...

jqueryhtmlloading-image

What is the best way to unravel the web of Django URLs within my project?

As a newcomer to django, I created a project and app by carefully studying YouTube videos and the Django documentation. I implemented HTML pages for sign in, sign up, and business sign up respectively. project/urls.py from django.contrib import adm ...

pythonhtmldjangourl

pictures on the blog entries

I'm looking to customize the look of images within a section. I want to add borders to the images, but since they are being added dynamically as content in blog posts, I can't reference them directly. Can you recommend a way for me to achieve thi ...

htmlcss

The CSS files are not downloading for me

I am trying to incorporate some .css files into my Django project, but for some reason they are not loading. The css files can be found at "/myproject/media/css". Here is how I have set it up: import os.path PROJECT_DIR = os.path.dirname(__file__) ME ...

cssdjango

What is the best way to animate various sprites using distinct buttons in HTML and CSS?

I've been experimenting with animating a sprite by using different onClick button triggers. I encountered an issue where only one of the buttons works correctly in the fiddle. However, in my local file version, the other buttons work but only once and ...

javascriptjqueryhtmlcssanimation

Unveiling the Secrets: Scraping HTML Code from a Webpage Dynamically Using Selenium and Python

Learning Selenium has been quite challenging for me as I am just getting started. I have a total of 3 buttons on a webpage, and after each button click, my goal is to retrieve the entire HTML code of the page (I am comfortable using BeautifulSoup for any n ...

pythonhtmlseleniumweb-scrapingbeautifulsoup

tips for placing an input field and button side by side

Is there a way to align the input and button on the same line using Bootstrap 5? I've tried various methods but nothing seems to be working. Any suggestions on how to style it or utilize specific Bootstrap 5 markup? <link href="https://cdn.jsd ...

cssbootstrap-5

Storing the selected value from dynamically generated options in Angular using ngFor

I have a collection of items called Fixtures. Each fixture contains a group of items named FixtureParticipants. Here is my process for generating choices: <tr *ngFor="let fixture of fixtures$ | async; let i=index"> <th scope="row& ...

htmlangulartypescript

"Can you guide me on accessing an HTML element ID in Vue through a @click event

Just starting out with Vue and I'm trying to retrieve the button id that I've set up using the following code snippet: <li v-for="subject in this.$root.$data.LoggedUserSubjects"> <button :style="btnStyleObject" :id="subject.su ...

javascripthtmlvue.js

Sending form data to PHP script following Javascript verification

After implementing basic validation for a contact form, I encountered an issue where the form would not submit to the PHP file responsible for sending emails. Despite setting the button type as "submit" and defining the form action as "contactform.php", th ...

javascriptphphtml

New feature in Bootstrap 5: Fixed navigation with smooth scroll effect

Recently, I made the switch from Bootstrap 4 to Bootstrap 5 for my template. Surprisingly, I didn't encounter this issue with Bootstrap 4. Initially, I suspected that adding a flex container inside the navbar might be causing the problem, but that doe ...

htmlcssbootstrap-5

Run an <a/> tag using code

Below are the HTML tags I am working with: <li><a href="#view2" >Photo</a></li> <li><a href="#view3">Data</a></li> <li><a href="#view4">Cloud Shop</a></li> <li><a href="#view ...

c#htmlasp.net

A bar graph fails to display on d3 visualization

I am struggling with rendering my bar graph using activity tracking data. Even though I believe my data structure is correct, the rects are not being displayed on the graph. Unfortunately, I cannot identify the mistake I might have made. The dataset is ava ...

htmljsond3.jsgraph

Update the parent element's class style within a targeted div media query

I am facing a challenge where I want the width of my .container element to be 100% when the screen size reaches 900px. The issue is that I have used .container on multiple pages and only wish to change its appearance within the #sub-top div. The terminolo ...

javascriptjqueryhtmlcss

I'm struggling to determine the source of the color for my linked CSS. Any ideas where to look?

I am experiencing an issue with a link that is displaying as white and gray for "a" and "a:hover", despite my CSS file specifying otherwise. Firebug confirms this, but I can't figure out what is overriding it. Can anyone offer any insight? Below is t ...

csscolors

toggle switch for numerical input

Whenever the "Qty" radio button is selected, I need to activate an input box that accepts numbers. Conversely, when the "rate" radio button is clicked, I want to disable this input box. This is how I designed it: <input type="radio" class="radioBtn" ...

javascriptjqueryhtml

How can I obtain the width of one element and then use it to adjust the size of another element that is

Currently, I am working on a dropdown menu and facing an issue with setting the submenus to match the width of the top-level page. In my HTML structure (specifically for a WordPress theme), it looks something like this: <ul class="menu"> <li ...

javascriptjquerycsswordpress

Is there a way to display my <i> tags inline without any issues?

I am facing an issue with my code and need assistance. I have two links that I want to display but my code doesn't seem to respond as expected. The first link is: https://i.sstatic.net/fryPH.png The second link is: https://i.sstatic.net/j849M.png A ...

htmlcsstwitter-bootstrap