Creating a responsive design for my website that will adapt to any device, whether it be a phone

As a beginner in HTML and CSS, I am currently working on creating a website for my project. However, one of the requirements is that it should be responsive. I have encountered an issue where my yellow box appears to be getting smaller while the red and blue boxes maintain their size when viewed on different devices such as smartphones and laptops. I would greatly appreciate any help or advice on how to make my website more responsive. Thank you.

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>

  <div class="row">
    <div class="col-md-4" style="margin-left: 3%"  >
      <div class="color">Column 1</div>
      <div class="color" >Column 2</div>
    </div>
    <div class="col-md-8">Column 3</div>
  </div>
  <style type="text/css">
    .color:nth-child(1) {
    background:red; 
    height:40%;
    margin-top:5%;
    margin-left: 2%;
    border-radius: 4%;
    width: 100%;    
}
 .color:nth-child(2) {
    margin-top: 3%;
    border-radius: 4%;
    background:blue; height:260px;
} 
.col-md-8 {
    background:yellow; height:628px;
    width: 38%;
    margin-left: 15%;
    margin-top: 1%;
    border-radius: 9%;
}

  </style>

Answer №1

Uncertain about the nature of this Website, consider using "min-width" instead of the typical "width" for the yellow column.

Answer №2

While it may seem like the red and blue elements are unresponsive, they actually are. Their 100% width setting just makes it appear otherwise. Adjust their width to match that of the yellow element, and you'll notice their responsiveness in action.

Answer №3

Summary:

Everything is functioning properly thanks to the width:38% CSS property in the col-md-8 override.

Detailed explanation:

Option one: Consider creating your own custom classes instead of directly overriding Bootstrap classes.

Option two: Bootstrap likely provides classes that suit your needs, so avoid writing custom CSS and utilize the utility classes from Bootstrap. Check out these resources: https://getbootstrap.com/docs/4.0/layout/grid/

https://getbootstrap.com/docs/4.1/layout/utilities-for-layout/

https://getbootstrap.com/docs/4.1/utilities/spacing/

Ensure proper HTML document structure, you can use the Bootstrap starter template for guidance: https://getbootstrap.com/docs/4.0/getting-started/introduction/#starter-template

Place CSS code in appropriate sections within the document for better organization: https://www.w3schools.com/css/css_howto.asp

Answer №4

If you're looking to enhance your HTML and CSS skills, I recommend checking out the courses offered on the following websites:

https://www.freecodecamp.org/ and

These courses are completely free, allowing you to build a solid foundation in basic HTML and CSS before diving into using bootstrap. By completing these courses, you'll also learn how to create responsive web pages tailored to your preferences, giving you a deeper understanding of web development principles.

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

Selenium: Locating the element correctly, yet unable to perform interactions with the input field

When trying to interact with an input field using the provided script: from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.support.ui import WebDriverWait from selenium.webdriver.support import expected_ ...

Searching for a comprehensive guide to web-related terminology that is widely accepted

Constantly immersing myself in studying the languages I am familiar with and exploring new development concepts and languages is a regular practice for me. When it comes to books, O'Reilly is my go-to choice, but when it comes to online resources, I&a ...

Guide to creating a square-shaped Bootstrap popup box

Is it possible to change the shape of the bootstrap popup box from rectangular to square? I need it to be a square box. Any help would be greatly appreciated. Thank you in advance. For reference, here is an example: https://i.sstatic.net/APZNt.png < ...

What is the significance of vendor prefixes in the world of CSS3?

While I can see the rationale behind using prefixes for experimental non-official features to avoid conflicts, what is the reason for using them on shadows and similar elements? Shouldn't all vendors be implementing effects consistently according to ...

There is a space separating the slider image and the navigation bar

Having a small space between the slider image and the navigation bar is causing some issues. I've tried various solutions like minifying the code, adjusting margins, and setting line heights to zero but nothing seems to be working. One question I have ...

Disappearing text with HTML Bookmark and CSS Overflow:Hidden - What's happening?

Within the header of my webpage, there is an image div that has been styled with overflow:hidden. Inside the content section, I have a bookmark anchor tag: <a name="arghargh"></a> Located at the top of the content area, there is a link that ...

Placeholder text missing in Internet Explorer 11

There seems to be a problem with the placeholder text not showing up in Internet Explorer 11 when using AngularJS. It displays correctly on all other browsers and I have not made any changes to the CSS that could affect it. I even tried disabling all style ...

Seeking a light-weight, text-rich editor specifically designed for use on our enterprise website. This editor should be even lighter than TinyMCE

I am in search of a lightweight text editor for an enterprise website, lighter than tinymce with basic buttons for the comment form. It is imperative that the editor also functions properly in IE6. So far, I have tried cleditor 15KB, but it has an issue in ...

When utilizing jQuery in HTML, the Marquee will bounce back upon reaching the end

My issue is that when I use a regular marquee, the text simply goes to the end and does not bounce back to the start as soon as it reaches the end of the div. Instead of using a normal marquee, I am looking to achieve this desired effect by utilizing jQue ...

What steps can I take to ensure that my collapsible menu is both dynamic and easily accessible

I have integrated an app with the footable plugin to enable responsive tables. This feature transforms table columns into a collapsible menu that dynamically appears as a new row when a user expands it by clicking a button, and disappears upon collapse. I ...

How can we stop the anchor jump caused by a third-party script?

I'm currently utilizing a third-party script (details provided below) to divide a form into multiple ajax'd pages. However, when I attempt to move on to the next page, it immediately jumps to an anchor at the top of the form. This behavior is unn ...

Leveraging Excel VBA to manipulate the selection in a dropdown menu on a webpage

Is there a way to select a specific value using Excel VBA? <div class="drpCompanies"> <select class="selectBox homepage selectCompanies" style="padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px"> <op ...

Tips for placing the brand logo on the left edge of the Bootstrap 4 navbar

I am facing an issue with the placement of my logo. The code snippet below shows how it currently looks: <nav class="navbar navbar-fixed-top navbar-light bg-primary"> <div class="container-fluid"> <img class="navbar-brand" src="logo.p ...

Ways to arrange buttons vertically so they are perfectly aligned beneath one another

I'm trying to align a set of buttons, each containing an information icon, vertically under each other. The current alignment can be seen in image_1 below. Can someone please provide me with guidance on how to achieve this using CSS and HTML? I was t ...

In my Flask Bootstrap website, the navigation bar remains unchanged by the presence of Javascript

I am currently in the process of creating a navigation bar for my Flask website using Bootstrap. However, when I implemented it into my HTML code, it is not displaying correctly which leads me to believe that the JavaScript may not be functioning properly. ...

Is it possible to trigger a mouseover event on a background div that is obscured by a foreground tooltip in jQuery?

I created a unique effect where a background div fades in when moused over, followed by the foreground div fading in. However, I encountered an issue where the tooltip ends up "flashing" as the foreground steals focus from the background. For reference, h ...

Tips for incorporating an anchor tag within an img tag in HTML?

Is it possible to add an anchor tag inside an img tag in HTML? <img src="img.jpg" alt="no img" /> I want to include the following inside the img tag: <a onclick="retake();" > Retake </a> The goal is to allow users to retake a photo by ...

Struggling to remove the translucent effect when hovering over the share button

I have been struggling with a seemingly simple issue for a few hours now. On my website, I have some share buttons located at . Although I want these buttons to remain completely black when hovered over, they are inexplicably becoming slightly transparen ...

When you click on a sublevel in the vertical CSS and JavaScript onclick menu, it disappears automatically

I'm a beginner when it comes to Javascript, and I'm still getting the hang of CSS/HTML. Currently, I am working on creating a vertical menu using CSS and javascript. My goal is to have the sublevels appear on the right side of the menu when someo ...

Encountered an issue retrieving two rows nested within a parent row using Bootstrap 4 and VueJs

Currently, I am working on a VueJs and Bootstrap4 component where my aim is to achieve a design similar to the one shown using the available bootstrap classes. After going through the documentation, I came across the customized classes h-75 and h-25 provi ...