What is the best way to implement media queries in a column layout for a responsive webpage?

My goal is to display a picture below the navbar when the window size becomes small or in mobile mode, followed by my name and other details. However, I am having trouble understanding how to implement this using media queries.

DESKTOP PREVIEW

https://i.sstatic.net/czMYy.jpg

MOBILE PREVIEW

https://i.sstatic.net/z8OPV.jpg

@media (min-width: 700px) {
  .col-md-8 {
    margin-top: 5px !important;
    float: left;
    display: block;
  }
}
<div id="s">
  <div class="row">
    <div class="col-md-8">
      <h1>AYAN ADHIKARY</h1>
      <h4> WELCOME TO MY PAGE</h4>
      <p> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="89cec4bbb9c5bdb1c9eee4e8e0e5a7eae6e4">[email protected]</a> <br> Ph No.- 800001710 <br> INDIA
      </p>
    </div>
    <div class="col-md-4">
      <img src="1.png">
    </div>
  </div>
</div>

htmltwitter-bootstrapcssbootstrap-4

Answer №1

If you're using Bootstrap, there's no need to alter the predefined classes in the framework. The whole idea behind Bootstrap is that you can simply add classes to customize how your content appears on different screen sizes. Keep in mind that Bootstrap's grid system consists of 12 columns; so if you assign a column to take up all 12 spaces, the following element will move to a new row.

In the example below, I'm instructing the first element in the row to occupy 12 out of 12 columns on mobile devices, and 8 columns on tablet devices and larger screens. The second element is also set to use 12 out of 12 columns, but only 4 columns on tablet devices and above;

All you have to do is manipulate the classes to organize your elements as needed.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div id="s">
  <div class="row">
    <div class="col-12 col-md-8">
      <h1>AYAN ADHIKARY</h1>
      <h4> WELCOME TO MY PAGE</h4>
      <p> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="51161c63611d656911363c30383d7f323e3c">[email protected]</a> <br> Ph No.- 800001710 <br> INDIA
      </p>
    </div>
    <div class="col-12 col-md-4">
      <img src="https://via.placeholder.com/300" class="img-fluid">
    </div>
  </div>
</div>

Answer №2

It's generally not recommended to override bootstrap classes directly. Here is an example:

Insert your own image here

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">

  
<div class="col-12 col-sm-4 col-sm-push-8">
    <img class="img-fluid" src="C://Users/sabarinath j/Pictures/Screenshots/Screenshot (1).png">
  </div>
<div class="col-12 col-sm-8 col-sm-pull-4 text-center text-sm-left">
  <h1>AYAN ADHIKARY</h1>
  <h4> WELCOME TO MY PAGE</h4>
    <p> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="eaada7d8daa6ded2aa8d878b8386c4898587">[email protected]</a> <br>
      Ph No.- 800001710 <br>
      INDIA</p>
  </div>  
</div>

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

Animation scaling on the iPhone seems to abruptly jump away once it finishes

Encountering an issue with animations that is causing unexpected behavior on physical iPhone devices but not in the simulators. The problem arises when the background zooms in and then the div suddenly jumps to the left after the animation completes, as sh ...

cssreactjstypescriptanimationstyled-components

Tips for showcasing information on an HTML website

I am currently facing an issue with displaying addresses retrieved from a database in my project. The problem lies in the formatting of the address when it is displayed on the page. Currently, the address is being displayed as follows: Address: 1 Kings S ...

htmlcsstwitter-bootstrap

validating links in Laravel

Is it feasible to validate a href element in laravel? For instance, I have various user responses in my guest book and each user has the capability to delete their posts. The deletion process is as follows: <div class="col-lg-2"> <ul class="l ...

phphtmllaravel

React application triggers `OnKeyDown` event just once

Hey there! I'm diving into the world of web development and could use some help. My current challenge involves manipulating input data based on key combinations like ctr + ArrowUp (increase) and ctr + ArrowDown (decrease). The dynamic part should be h ...

javascripthtmlreactjsonkeydownselection-api

What is the best way to dynamically swap out an image within an element?

Is there a way to dynamically replace this image without deleting the HTML SVG element and re-rendering it? xlink:href="http://missosology.info/forum/download/file.php?avatar=11666_1307312313.jpg" CODE: https://jsfiddle.net/bfv17f0e/ <svg class="clip ...

javascriptjqueryhtmlsvg

Issue with division operation in HTML not functioning

I've been working on a division calculation within an HTML file, but so far I haven't had success using PHP or JavaScript. While {{ property.listprice }} is correctly displaying a number in the HTML file, the other elements are not functioning as ...

phphtml

What are the steps to generate a production build directory in a React project?

Currently, I am developing a website utilizing react for the frontend and node.js for the backend. However, I'm unsure of how to deploy it to the live server. After conducting some research, I learned that I need to create a build folder. To provide a ...

htmlcssnode.jssql-serverreactjs

Implement Angular backend API on Azure Cloud Platform

I successfully created a backend API that connects to SQL and is hosted on my Azure account. However, I am unsure of the steps needed to deploy this API on Azure and make it accessible so that I can connect my Angular app to its URL instead of using loca ...

htmlangulartypescriptazureazure-devops

Discovering the functionality of detecting the pressing of the "enter" key within an input field that triggers the next button in Internet Explorer versions 8 through 10

My current challenge involves detecting Internet Explorer's behavior when the Enter key is pressed in an input box with a button element beside it, especially when they are not enclosed within a form element. This unique feature of IE is intriguing b ...

javascriptjqueryhtmlinternet-explorer

What could be causing my ng-grid footer to refuse to align with the bottom border?

Currently utilizing ng-grid and various AngularJS UI Bootstrap components on my website, I have encountered a recurring issue. By diligently investigating, I have successfully replicated the problem. Access the Plunker demonstration through this link. The ...

javascripthtmlangularjsangular-ui-bootstrapng-grid

What is the best way to position my content next to my sticky sidebar for optimal visibility?

Just starting out with coding and tackling my initial project using reactJs and bootstrap 5. My aim is to create a sticky side navbar that remains fixed on the side while my content displays next to it, even when navigating through different routes. Unfort ...

javascriptcssreactjsreact-bootstrapbootstrap-5

Using HTML code to incorporate one HTML file into another's structure

As a skilled programmer, I understand the importance of code reusability. Despite being new to HTML and CSS programming, I often find myself writing repetitive code in one HTML file. Is there a way to avoid this redundancy? Can functions be utilized in H ...

html

MUI Grid - justify content to the right

I'm new to utilizing the MUI Grid system and I am currently trying to accomplish a simple task of aligning my 'Cancel' and 'Save' buttons all the way to the right on the screen. Despite browsing through various posts and documentat ...

cssflexboxmaterial-ui

Modify the button's text with jQuery after it has been clicked

I've been struggling to update the text of a button after it's clicked, and I'm encountering an issue where it works in one part of my code but not in another. Could someone please guide me on what might be missing in my code? The first bl ...

javascriptjqueryhtmlcss

Tips for revealing a hidden HTML tag

I am currently trying to validate the content within #textd to ensure it is not empty and contains more than 150 characters. If it meets these conditions, I need to transfer the content to another webpage; otherwise, display an error message based on the c ...

javascriptjqueryhtml

What is the best method for locating X-Path for elements inside a frameset?

I need help creating a test case for Selenium because I am struggling to locate elements on my website. The issue seems to be related to the fact that my site uses an HTML frame set. When I try to select all links using Firebug: //a I do not get any res ...

htmlcssxpathselenium

Unable to load the Bootstrap CSS file from the specified import path: "bootstrap/dist/css/bootstrap.min.css"

I am currently working on a React application where I have a page that utilizes components from the react-bootstrap library. The issue I'm facing is related to styling, even though I have already imported the necessary bootstrap CSS file: import "boot ...

cssreactjscomputer-sciencereact-bootstrapvisual-web-developer

Error Encountered: Unable to Locate 'bootstrap' label in Bootstrap 5 Popover

I have been working on implementing a popover in my Angular 12 project using Bootstrap version v5.0.1. However, I am encountering a name error that I can't seem to resolve: var exampleEl = document.getElementById(item.name + index); var tooltip = ne ...

javascripttwitter-bootstrapbootstrap-5bootstrap-popover

Is it advisable to avoid using XHTML elements, tags, and attributes that will not be included in the HTML 5 specification?

Given that I am currently utilizing XHTML 1.0 Strict, does it make sense to avoid using XHTML elements, tags, and attributes that are not included in the HTML5 specification? For example: <acronym> and <big> ...

xhtmlhtml

Preserving data in input fields even after a page is refreshed

I've been struggling to keep the user-entered values in the additional input fields intact even after the web page is refreshed. If anyone has any suggestions or solutions, I would greatly appreciate your assistance. Currently, I have managed to retai ...

javascriptjqueryhtmlsession-storage