Mobile device causing HTML margins to shrink

I've attempted to utilize a few posts here that discuss resizing for mobile devices, but unfortunately, I'm having trouble getting it to work correctly. The margins are causing all the elements to be squished together when viewing the site on a mobile device.

/* CUSTOM STYLING */

.introPar1 {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
    margin-left: 400px;
    margin-right: 400px;
    font-size: 30px;
}

.introPar1 h1 {
    text-align: center;
}

.contacts {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
    margin-left: 400px;
    margin-right: 400px;
    font-size: 30px;

}

/* RESPONSIVE DESIGN */

@media (max-width: 1100px) {
    .introPar1 {
        margin-right: 20px;
        margin-left: 20px;
    }
}

@media (max-width: 750px) {
    body {
        margin-right: 5vw;
        margin-left: 5vw;
    }
}

@media (max-width: 500px) {
    body {
        margin-right: 2vw;
        margin-left: 2vw;
    }
}
htmlcss

Answer №1

If you are viewing this page on a mobile device, it may not display correctly. To fix this issue, please use the following link: https://i.sstatic.net/40vtG.png

Additionally, adjust the navigation bar width by increasing it to accommodate the background image size (Width: 1520px).

Answer №2

There seem to be multiple issues with your code, but the menu problem arises because the li element is not accommodating the height of the a element. This results in the list items stacking vertically instead of horizontally. Additionally, the 

.introPar1 { margin-left:400px;margin-right:400px}
style doesn't seem necessary and might be causing confusion.

To fix the menu issue, you can add display:block to the a element.

I've included a snippet of the code from your site below for reference:

body img {
  max-width: 100%;
  height: auto;
}

/* TOP NAVIGATION */
nav ul li a {
  text-decoration: none;
  margin: 20px;
  padding: 20px;
  border-style: solid;
  border-color: grey;
  display: block;
}
nav ul li {
  float: left;
}
nav ul {
  list-style-type: none;
  float: left;
}
nav {
  background-color: #f2f2f2;
  padding: 10px;
  float: left;
  width: 100%;
  box-sizing: border-box;
}

// More CSS styles...

@media (max-width: 1100px) {
  introPar1 {
    margin-right: 20px;
    margin-left: 20px;
  }
}

// More media queries...

<div class="bgimage">
  <img src="http://via.placeholder.com/1200x1000">
</div>

<nav>
  <ul>
    <li class="home"><a href="index.php">Crafts LLC</a></li>
    <li><a href="about.php">About Us</a></li>
    <li><a href="contact.php">Contact Us</a></li>
  </ul>
</nav>
<div class="banner"><img src="http://via.placeholder.com/350x150"></div>

// More HTML content...

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

Utilizing Angular Forms for dynamic string validation with the *ngIf directive

I have a challenge where I need to hide forms in a list if they are empty. These forms contain string values. I attempted to use *ngIf but unfortunately, it did not work as expected and empty fields are still visible in the list. How can I address this iss ...

javascripthtmlcssangulartypescript

Curious about how to swap the positions of these two divs?

After wrapping them in divs and adding inline-block to both elements to display them side by side, I'm now exploring options to switch their positions. Specifically, I'd like the right element to be on the left. Any ideas on how to achieve this? ...

htmlcss

Preventing PHP Form Resubmission and Addressing Unusual Problems

Let's keep this brief. This is the code I've been working on: <?php if ($_POST['title'] != 'Title' && $_POST['date'] != 'Date') { $fileName = 'blog.txt'; $fp = fopen('blog.txt', &ap ...

phphtmlforms

Can the keydown event have an impact on setInterval functionality?

I created a basic snake game using JavaScript and attempted to incorporate a new feature where var trail = []; var tail = 5; var normal_speed = 1000 / 10 var speed = 1000 / 10; var game_status = 0; var my_game; button.addEventListener("click", function ...

javascripthtml

Position a div at the bottom of a grid inside another div using tailwind CSS

https://i.sstatic.net/Clw7r.pngi am struggling with the following code <template> <div class="grid grid-cols-1 gap-4"> <div id="test" class="bg-red-700 h-screen"> <div class="grid grid-cols-1 g ...

cssvue.jstailwind-css

Original selection unavailable in pagination

I'm encountering an issue on my website where Bootstrap and JQuery don't seem to work well together. $("ul.pagination li:not(.active) a").on("click",function(){ $(".pagination li.active").removeClass("active"); $(this).parent().addClass("activ ...

javascriptjqueryhtmltwitter-bootstrap

Arranging unrelated divs in alignment

http://codepen.io/anon/pen/Gxbfu <-- Here is the specific portion of the website that needs alignment. My goal is to have Onyx Design perfectly aligned with the right side of the navbar, or to have the navbar extend up to the end of "Onyx Design". The ...

javascripthtmlcss

Getting the chosen value from a dropdown menu on form submission using PHP

How to Populate a Combo Box from a Database in PHP? <td>Item Name:</td> <td><select name="items"> <option value="0" selected="selected"> Choose</option> <?php while($row = mysql_fetch_ass ...

javascriptphphtmlforms

Enhancing the style of the top menu Index by applying a border-bottom effect when hovering over it in a CSS Horizontal Drop Down Menu

I'm having trouble adding a border-bottom: 1px solid #FFF to all the top menu (index) items when they are hovered over. Can anyone help me with this? #menu{ padding:0; margin:0; position: fixed; top: 30px; left: 0px; font-size ...

htmlcss

What is the formula for determining the grid width when an item exceeds the column size?

I am working with a grid that matches the size of an image, which can be adjusted to be both smaller and larger in size. Within this grid, I have 6 items. Each item is wider than the columns in the grid. In order to achieve the desired width for the gri ...

csstailwind-css

Insert a line break into a tweet using JQuery

After installing this jquery plugin, I wanted to display my tweets on my website. However, the tweets are currently too close together and I need to add a line break between each one. Can anyone help me with how to achieve this? Below is the code I have b ...

jqueryhtmltwitter

Enable automatic indentation for wrapped text

I'm still learning the ropes here, but I'm looking to have text automatically indent when it's wrapped. Instead of this: Peter piper picked a peck of pickled peppers. It should look like this: Peter piper picked a peck of pickled pepp ...

csstextformatting

Retrieve the order in which the class names are displayed within the user interface

In the following code snippet, each div element is assigned a common class name. <div id="category_9" class="list_item" data-item_ids="[38]"</div> <div id="category_2" class="list_item" data-ite ...

javascripthtmlruby-on-railsajax

The element is anchored within a div, but its position is dependent on a JavaScript script

I am dealing with a situation where I have a div named "Main_Card" containing text and an icon. When the icon is clicked, it moves the "Main_Card" along with everything inside of it. The challenge arises when I need to set the icon's position as eithe ...

javascriptjqueryhtmlcss

CSS alone has the power to make multiple elements react to a hover action on a div

Is there a way to dynamically change the size of multiple div elements on hover? In this example, we can see how one div element's size changes when hovering over another div element: https://jsfiddle.net/9510a6kj/ .left, .right{ float:left; ...

htmlcsscss-selectorshover

HTML table designed to work in both Internet Explorer and Firefox, with a header and footer that remain fixed while allowing vertical and

I am in need of a highly functional HTML super-table. I am open to using jQuery or any other JavaScript library, regardless of potential drawbacks, as long as it meets the following requirements. It must support: Compatibility with at least IE8 and the ...

htmlhtml-table

JS unable to insert new row in table

I checked the input value before submitting it in the form and confirmed that it is correct, returning as a string.enter image description here const saveList = () => { const inputListNameText = inputListName.value; fetch('/api/lists' ...

javascripthtml

Issues with clearRect() function in HTML5 canvas

Recently, I developed a function with the goal of redrawing a square line block that covers the entire page whenever the window size is adjusted. For reference, you can view my code at http://jsfiddle.net/9hVnZ/ However, I encountered an issue: bgCtx.cl ...

javascripthtmlcanvas

Having issues with your JQuery code?

I am attempting to locate a cell within a table that contains the class 'empty'. My goal is to then utilize a code snippet to obtain the id (cell number) and determine which cells are adjacent to it. As part of my test, I am experimenting with t ...

javascriptjqueryhtml

Converting HTML/Javascript codes for Android Application use in Eclipse: A Step-by-Step Guide

How can I implement this in Java? Here is the HTML: <head> <title>Google Maps JavaScript API v3 Example: Geocoding Simple</title> <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="styles ...

javajavascriptandroidhtmleclipse