Tips for making an HTML page responsive while utilizing margins in CSS

.flex-container {
  display: flex;
  justify-content: center;
}

.flex-container > div {
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

#first-section{
    width: 30%;

}

#second-section{
    width: 60%;
    margin-top: -200px;
    background: white
}
<body>
<div header>
  <img width="100%" src="https://backgrounddownload.com/wp-content/uploads/2018/09/header-background-6.jpg" />
</div>
<div class="flex-container">
  <div id="first-section">        <h2>Design Trade Program</h2>
                <p>        
    Qualified interior decorators, designers, stylists and architects can enjoy an exclusive 20% discount on full-priced merchandise with no minimum purchase.
    </p>
    <p>
    Want to join?  Please fill in the below details and we will follow up with you directly within one to two business days. Additional services are available to design professionals depending on your location.
    </p></div>

  <div id="second-section">  <h2>Design Trade Program</h2>
    <p>        
Qualified interior decorators, designers, stylists and architects can enjoy an exclusive 20% discount on full-priced merchandise with no minimum purchase.
</p>
<p>
Want to join?  Please fill in the below details and we will follow up with you directly within one to two business days. Additional services are available to design professionals depending on your location.</div>  
</div>

</body>

I have a question regarding this code snippet. It works fine on regular windows, but the layout is not optimal on tablets or mobile devices. I want the header to show first, followed by the first section and then the second section when viewed on a mobile device. How can I make it responsive for mobile viewing? Thank you.

htmlcss

Answer №1

.flex-container {
  display: flex;
  justify-content: center;
  /* background-color: DodgerBlue; */
  flex-wrap: wrap;
}

.flex-container > div {
  /* background-color: #f1f1f1;*/
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

 #first-section{
  width: 30%;
}

#second-section{
  width: 60%;
  margin-top: -200px;
  background: white
}

@media screen and (min-width: 320px) and (max-width: 1024px) {
  #first-section{
    flex: 0 0 100%;
  }
  #second-section{
    flex: 0 0 100%;
    margin-top: -200px;
    background: white
  }
}

Answer №2

Another approach is to rely on percentages rather than pixel values, as negative values may not be effective in setting margins.

Answer №3

If you want to ensure your website content displays properly on mobile devices, utilize media queriesin CSS.

For instance, to make adjustments for mobile viewing, consider implementing the following code:

@media (min-width: 320px) and (max-width: 767px) {
    .flex-container { flex-flow: column; }
    .flex-container > div { width: 100% }
    .second-section { margin-top: 10px }
}

To extend this style to tablets, simply modify (max-width: 767px) to (max-width: 1024px), allowing for a stacked layout on tablet devices as well.

Your complete CSS code would then be:

.flex-container {
  display: flex;
  justify-content: center;
}

.flex-container > div {
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

#first-section{
    width: 30%;
}

#second-section{
    width: 60%;
    margin-top: -200px;
    background: white;
}

@media (min-width: 320px) and (max-width: 767px) {
    .flex-container { flex-flow: column; }
    .flex-container > div { width: 100% }
    .second-section { margin-top: 10px }
}

For additional media queries tailored to various devices, refer to this resource: CSS Media Queries for Desktop, Tablet, Mobile

Answer №4

If you're looking to optimize your design for mobile or iPad, consider incorporating the following code snippet into your style file:

@media screen and (max-width: 1279px) {
 .flex-container {
   flex-direction: column;
  }
  #first-section, #second-section {
   width: 100%;
  }

}

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

Incorporating a CSS file within a JSP page

I've been struggling to get my '.jsp' file to utilize a '.css' file that I created. Initially, I stored the '.css' file in the 'WEB-INF' folder but discovered that this folder is not accessible publicly. So, I m ...

javahtmlcssjsp

The function $(id).html() is not functioning as expected within the ajax success handler

I am facing an issue where I am using jquery and ajax to change the HTML text with a returned json array. In my PHP file, I am using echo with json.encode() to return the json array object. Everything seems fine in the console, but when I attempt to use th ...

phpjqueryhtmlajax

The vertical shift in one of the inline table cell DIVs is being caused by two of them

I've been searching for a solution to my issue, but have come up empty-handed. I apologize if this has already been discussed before. My HTML page contains a section that appears as follows: <div id=wrap> <div id=lb> Content ...

htmlcsscss-tables

Avoid Scrolling within an iFrame in HTML with the Use of #

I have a menu loading in an iframe with links using # like http://<location>/page.html#part1. When I click inside the iframe, the entire page outside of the iframe scrolls to the location of #. How can I stop this from happening? I only want the me ...

javascripthtmlcss

Converting JSON data to a table in PHP with no records present

I need help displaying JSON output in an HTML table, but the table is showing a lot of empty records. (refer to photo below) <?php $json2=file_get_contents("****" . $row["Kenteken2"]); $data2 = json_decode($json2); if (strpos( ...

phphtmljsonhtml-table

Elements on the page appear and disappear as you scroll down

Whenever my scroll reaches the bottom of element B, I want my hidden sticky element to appear. And when I scroll back up to the top of element B, the sticky element should be hidden again. Here are my codes: https://i.sstatic.net/J49dT.jpg HTML <htm ...

javascriptjqueryhtmlcss

"Capturing the essence of your online presence: The

I recently completed a website for my Students Organization, which includes a special page dedicated to recognizing the individuals who helped organize our activities. Each member is represented with a photo on this page, sourced from their Facebook profil ...

javascripthtmlcssfacebookfacebook-graph-api

Angular 10: Oops! An issue occurred stating that the mat-form-field needs to have a MatFormFieldControl inside

When attempting to set up a form group on a page, I encountered the following error: ERROR Error: No value accessor for form control with name: 'modalidade' at _throwError (forms.js:2431) at setUpControl (forms.js:2339) at FormGroupDirective.addC ...

htmlangulartypescript

Static Sidebar integrated with Twitter Bootstrap version 2.3.5

Currently, I am in the process of learning how to incorporate a fixed sidebar using Twitter Bootstrap 2.3.5. Below is a snippet of the code I have been working on: <div class="container"> <div class="row"> <div class="span4" id="sid ...

htmlcsstwitter-bootstrap

JavaScript text spacing

I'm currently utilizing the JavaScript code snippet below to clear out the existing content within a div element in order to insert new elements. However, I've encountered an issue where once the div is cleared, its CSS styling is lost. I am atte ...

javascriptcss

Calculating the discrepancy in offsetTop values

Having trouble understanding offsetTop differences? When I input individual values for i and n, the output is correct. Any ideas where I might be going wrong? <html> <body> <div class="names" style="position: absolute; left: 13px; top: ...

javascripthtmlloopsdom

Prevent the underlining of the :before content of a link from being affected by a rule applied to the link

I have a hyperlink that becomes underlined when hovered over. I want to add a > symbol before the link, but I don't want it to be underlined when the link is hovered. Here's the code I'm using: .box.blueb a { color: #0098aa; } .box.blueb ...

csshyperlinkunderline

Responsive carousel images have a blurred effect

https://i.sstatic.net/hmKhW.jpg When attempting to make the carousel images responsive, they appear blurred as the screen resolution decreases. The alignment is correct, but the image quality is not maintained. Bootstrap is being used for this. For refer ...

htmlcsscarouselresponsivebootstrap-5

Opera browser fails to render CSS3 box shadow effect

My menu features CSS3 effects on hover and active states, giving it a unique appearance. Below is the CSS3 styling I have implemented: #Menu a:active, #Menu a.active:before,#Menu a:hover:before { Content: ' '; position:absolute; z-i ...

cssopera

"Learn how to convert basic input fields into user-friendly Bootstrap input groups using the power of jQuery

Is there a way to use jQuery to convert my basic input field into a bootstrap input-group like the one shown below? This is how I created the input: <div class='input-group date' id='ff'> <input type='text' class= ...

javascriptjqueryhtmltwitter-bootstrap

Design a blurred glass effect background with a circular spotlight focusing on a specific section of an HTML webpage

I've been attempting to achieve a frosted glass effect on a background, with a circular section unblurred. Unfortunately, my current implementation in the sandbox editor is not working as expected - the area of the circle remains blurred. If you&apos ...

css

What is the best way to prevent an HTML table from having columns that adjust their width dynamically based on the content in the <td>?

Is there a way to create a table with equal column sizes that do not change based on the length of the data within the table? https://i.sstatic.net/Gyt4P.png In the image provided, the data under the heading "Title" seems to shift the second column to th ...

javascripthtmlcsstwitter-bootstrap-3

Allow all images on the webpage to be easily dragged and dropped into a designated upload section

I am in the process of developing a browser extension that allows users to save images from web pages into their favorites, similar to Pinterest. The functionality involves clicking on the extension icon which adds a special field to the HTML where users c ...

javascriptjqueryhtmldrag-and-dropdropzone.js

The <hr> element creating a line beneath a connected div

Currently, I am in the process of designing a website with three main divs all on one page. To visually separate these divs, I have included a subtle horizontal line. The horizontal line between the first and second div looks correct as intended. However ...

htmlcss

Receiving an HTML form with a hidden input on the server: Best practices and steps to follow

On my webpage, there is an HTML form where a third party application adds a hidden input. How do I access this hidden input on the server side? If I'm unable to determine the exact name of the hidden input, can I retrieve the entire form on the serve ...

javascripthtmljsf