What is causing my basic HTML/CSS Media Queries and child box positions to not function properly?

Hey there, I'm diving into the world of programming languages like CSS and looking for a little guidance. I've been troubleshooting my code for more than 24 hours now and need some fresh eyes to help me out with a couple of issues I can't seem to solve:

Goal #1: I'm trying to create three parent boxes that have text content along with a child box acting as a title within each parent box. The challenge is getting the child box to align flush in the top right corner of its parent. Despite various attempts with margins, I just can't seem to get it right!

Goal #2: My aim is to implement media queries for different device sizes - desktop (lg) with a minimum width of 992px, tablet view (md) ranging from 768px to 991px, and mobile view (sm) up to 767px.

Goal #3: I want to establish a responsive column layout where desktop view shows 3 columns per row, tablet displays 2 columns, and mobile showcases a single column. However, no matter what screen size I test on, only one column appears.

Just a heads-up - I am not allowed to use frameworks like Bootstrap and have been manually adjusting viewport sizes on my 13" laptop screen as well as through Chrome Developer Tools.

Furthermore, styling for the larger parent boxes is done using "p" tags, while the smaller title boxes are styled with classes ".child-one", ".child-two", and ".child-three," each having a distinct background color for differentiation.

I appreciate any assistance you can offer, feel free to ask for more details if needed!

Tried implementing styles.css (provided below) and simple HTML layout.

Software in Use: Sublime Text (browser-sync functioning correctly)

Expected Outcome: Three parent boxes containing child (title) boxes aligned to flush right at the top, responsive design based on media queries categorizing devices into lg, md, and sm sizes with appropriate column layouts.

htmlcssmedia-queriesmultiple-columns

Answer №1

* {
            box-sizing: border-box;
            padding: 0;
            margin: 0;
        }

        h1 {
            font-family: "Rockwell", fantasy;
            font-size: 150%;
            margin: 30px 0;
            text-align: center;
        }

        p {
            border: 2px solid black;
            background-color: #D9E4FF;
            position: relative;
            /* margin: 8px; */
            padding: 5px;
            overflow-wrap: anywhere;
            font-family: "Rockwell";
            font-weight: normal;
            font-size: 100%;
            text-align: left;
        }

        .child-one {
            border: 3px solid black;
            background-color: #8BABF1;
            padding: 5px;
            font-family: "Rockwell";
            font-weight: bold;
            font-size-adjust: relative;
            color: black;
            text-align: center;
        }

        .child-two {
            border: 3px solid black;
            background-color: #8B95F6;
            padding: 5px;
            font-family: "Rockwell";
            font-weight: bold;
            font-size-adjust: relative;
            color: black;
            text-align: center;
        }
        
        ...

    </style>
</head>

<body>
    <h1>Module 2 Solution</h1>


    <div class="row">
        <div class="child-one col-lg-4 col-md-6 col-sm-12">first </div>
        <p class="child-two col-lg-4 col-md-6 col-sm-12">Instead of eating chicken, consider eating unsalted nuts and
            seeds in
            order to take in low-fat protein.</p>
        <div class="child-three col-lg-4 col-md-6 col-sm-12"><span>Not Chicken.</span></div>
    </div>

    ...

</body>

</html>

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

The issue with loading scripts in a ReactJS NextJS app is related to the inline condition not working

I'm having trouble with an inline condition for loading scripts. The condition seems to be working because the tag is displaying text, but when it comes to scripts, it doesn't work. How can I resolve this issue? const cookie = new Cookies().get ...

javascripthtmlreactjstypescriptnext.js

Using Python and Selenium, you can locate an element inside another element

I've got the xpath for an element: /html/body/div[1]/div/div[2]/div[3]/div/div/div/div[2]/div[1]/div[2]/div[6]/div/div/div/div[1] Inside that div, there's another element: /html/body/div[1]/div/div[2]/div[3]/div/div/div/div[2]/div[1]/div[2]/div[ ...

pythonhtmlseleniumselenium-webdriverselenium-chromedriver

Do I need to utilize a Form element?

<p>text 1<span>additional information 1</span><span>more details</span></p> <p>text 2</p> <a> hyperlink </a> <button>submit</button> <p>yet another paragraph</p> Greeting ...

html

Creating uniform-sized flex items with varying image sizes

When setting flex: 1 1 0 on flex items, it does not work as expected especially when the flex items contain images of varying sizes. In this scenario, the flex-item containing the image ends up becoming significantly wider than the others. Below is the H ...

htmlcssflexbox

Transfer the content from a text area to a div element while keeping the original line breaks

I have a textarea and a div (containing a paragraph tag) where the content of the paragraph tag is updated with the text entered into the textarea upon keyUp. Is there a way to maintain line breaks from the textarea and have them appear as line breaks in ...

javascriptjqueryhtmltextarea

Is it necessary for each React component to have its own individual stylesheet?

Looking for some advice on React as a newbie here. I'm wondering whether each React component should have its own stylesheet. For instance, if I have my main App component that gets rendered to the browser, is it sufficient to include a CSS file the ...

javascriptcssreactjs

Creating images or PDFs from HTML with CSS filters: a guide

Looking for someone who has experience creating images or PDFs from HTML code. The HTML contains images with CSS filters such as sepia and grayscale. If you have worked on this type of project before, I would love to hear about your experience. <img cl ...

javascriptphpcsspdf-generation

Exploring the power of combining Django with Bootstrap's tab view feature

Struggling to incorporate tabs using Django and Bootstrap. Despite changing the URL, tab switching isn't working correctly. Looking for guidance on how to switch tabs seamlessly. Code <div class = "company-info-tab"> <d ...

htmldjangobootstrap-4

Steps for successfully passing an object in a dynamically generated function invocation

In my jQuery script, I have a click event bound to thumbnail images with the class "thumbnail": $(".thumbnail").click(function(){ var obj = new Object(); obj.el = "imageEdit"; obj.id = $(this).attr("id").replace("img_",""); openDialogue(obj); }); ...

javascriptjqueryhtmlajax

Is it possible to highlight the original 'anchor' or position of an element that has been moved using the float property?

Can the XXX be displayed using a CSS trick without the need for an extra HTML element or container? I attempted to use pseudo-elements and translate, but it was unsuccessful. p { background-color: grey; max-width: 200px;} small { float: right; margin-r ...

htmlcss

Dynamic value for href in div using Angular

Implementing a dynamic submenu using Angular is my current project. At the moment, I have set the href attribute with hardcoding as shown below: <ng-template #preSelectionMenuItem let-preSelections="preSelections"> <div class=' ...

htmlangular

Ensure the browser back button navigates to the login page seamlessly, without displaying any error

A scenario I am working on involves a Login jsp that accepts a user email and sends it to a servlet. If the provided email is not found in the database, the servlet redirects back to Login.jsp with an attribute "error". Within the header of Login.jsp, ther ...

javascripthtmljspbrowserscriptlet

Is there a way to create an HTML popup that automatically opens a link and an image file side by side

Can a popup code be created to automatically open both a link and an image side by side? ...

htmlimagehyperlinkpopup

How can I display an image caption within a lightbox using jQuery?

There is a caption under each image. <p> <a href="large.jpg"> <img width="85" height="75" src="thumb.jpg/> </a>Caption</p> I am looking to display the same caption at the bottom of the lightbox. <span id="lightbox-image ...

jquerycssxhtml

Choosing a parent element with SASS/SCSS

I'm facing a slight issue with SCSS syntax while creating a small component using the BEM methodology. Here's the HTML: <div class="message message--success"> <div class="message__title"> BEM Example </di ...

htmlcsssassbem

Can you explain the concept of "cascading" within CSS?

Can someone kindly explain the specific definition of "Cascading" in Cascading Style Sheets (CSS)? I have heard conflicting perspectives on this topic, so I am seeking clarification here. Any examples to illustrate would be greatly appreciated. ...

cssterminologycss-cascade

Issue with Ajax when attempting to load new content into a div after submitting a form

After implementing the code below to submit a form and use ajax to load the action page into a div on the same page, I am encountering an issue where clicking submit results in a duplicate copy of the form appearing again. <script src="//ajax.googleapi ...

jqueryhtmlajax

Transforming a GIMP design into a fully functional webpage

How can I transform my GIMP design into an actual website? After reviewing some information, it appears that using GIMP might not be ideal for creating CSS. It is recommended to utilize a CSS/HTML editor instead. Exporting HTML/CSS with Inkscape or GIMP N ...

htmlcssgimp

Accessing content from a different HTML document

I'm currently working on a project using node.js where I need to take input from a text box in an HTML file and store it in an array. However, I'm struggling with how to achieve this. My ultimate aim is to create a chat application, and I believe ...

javascriptjqueryhtmlnode.jsget

Utilize JQuery to inject both standard HTML elements and safely rendered escaped HTML onto a webpage

After storing some data in firebase that can be retrieved on the client side, I use JQuery to add it to the HTML. Although the process of prepending the data to the DOM element is straightforward, there is a security concern as raw code can make the applic ...

javascriptjqueryhtmlhtml-escape-characters