ASP.NET showcases icons in a distinct manner compared to HTML and CSS

I'm encountering an issue while trying to convert HTML/CSS to ASP.NET. In the original HTML, the icons were arranged in a single row of four icons, and for mobile devices, they were displayed in 2x2 rows. When I attempted to copy and paste the HTML with some minor modifications such as changing the /> closing tag, the icons now display in 2x2 rows on both PC and mobile devices instead of a single row with four icons. As a student who is relatively new to this, any assistance would be greatly appreciated, especially since it's for my thesis. Thank you in advance. (code provided below)

https://i.sstatic.net/iMSm4.png https://i.sstatic.net/HrYED.png

  @import url(https://fonts.googleapis.com/css?family=Fjalla+One);

  html, body {
    height: 100%;
    width: 100%;
    overflow-x: hidden;
  }

  body{
    font-family: 'Fjalla One', sans-serif;
    background: #2C3E50;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to top, #4CA1AF, #2C3E50);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to top, #4CA1AF, #2C3E50); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    background-repeat: no-repeat;

  }

  .container{
    margin: auto;
  }


  h1{
    text-transform: uppercase;
    font-size: 60px;
    line-height: 47px;
    letter-spacing: 2px;
    text-shadow: #533d4a 1px 1px, #533d4a 2px 2px, #533d4a 3px 3px, #533d4a 4px 4px;
    text-align: center;
    line-height: 60px;
  }


  .title{
    transform: rotate(-5deg);
    margin: 0 auto;
    display: block;
  }
  
  // code continues...

Answer №1

form {
    /* increase the margin */
    margin: 15px auto;
    padding: 10px;
}

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

Two divs positioned on the left side and one div positioned on the right side

Hey there, I am attempting to align 2 divs on the left side with one div on the right. #div1 #div2 #div1 #div2 #div3 #div2 #div3 #div3 The challenge is to have #div2 positioned between #div1 and #div3 when the browser window is resized smaller. Currentl ...

Why does tagging P trigger popups in the DIV when the DIV contains another DIV?

JSBIN HTML <p> <div>123</div> </p> CSS p div{ background:#f00; } Encountering an odd issue here. When I input the HTML structure as shown below: <p></p><div>123</div> The CSS code fails to produce ...

Creating a full-screen background with an rgba overlay using CSS

I recently encountered an issue with a fixed, fullscreen background image on my website. I initially applied the background image to the HTML's CSS instead of the body's CSS. To add a black overlay with lowered opacity, I included the following c ...

The function toggleClass() is malfunctioning

The .toggleClass() method seems to only be adding the "class" attribute to my selection, resulting in: <div id="toggle" class> ... rather than: <div id="toggle" class="on"> ... I've been trying to solve this issue for about 2 hours now ...

Element that hovers and floats

Just last week, I was working on coding a custom menu bar for my blog located at . However, when it came to adding social buttons, things went awry. It seemed like a float element issue! Despite my attempts to resolve it by adjusting widths and properties, ...

Ensure the padding and margin are both set to 0 when using inline styles

As someone who is not a designer, I attempted to send an email from PHP. In order to do so, I took a template and converted all styles to inline. However, I am unsure of where to include the universal margin and padding style in the template. *{margin:0px ...

Why Isn't the Element Replicating?

I've been working on a simple comment script that allows users to input their name and message, click submit, and have their comment displayed on the page like YouTube. My plan was to use a prebuilt HTML div and clone it for each new comment, adjustin ...

Comparing ASP MVC and PHP for uploading files: which is better?

This article on HTML5 file upload with a progress bar is really impressive: http://www.sitepoint.com/html5-javascript-file-upload-progress-bar/ However, the backend code provided is in PHP. I need assistance converting it to ASP.NET MVC3 or at least a go ...

Guide to dynamically updating the href of an SVG Image in Angular HTML

I am currently iterating through a list of employee objects, each containing an image URL that I need to incorporate into an SVG - Image element. <div *ngFor ="emp of employees"> <defs> <pattern id = "attachedImage" height ...

checkbox inspired by the design of the iPhone

I'm looking to create a custom checkbox! <label id="sliderLabel"> <input type="checkbox" /> <span id="slider"> <span id="sliderOn">SELECTED</span> <span id="sliderOff">SELECT</span> ...

Is there a way to adjust the width and create the illusion that the div is sliding in from off screen?

I successfully animated a side navigation menu to slide in from the left of the screen. The animation is working perfectly, however, I had to set the div's width to 0px in order for it to appear as though it's sliding in from off-screen. If I ch ...

Show Pictures Tailored for Individual Users

My website is built using a combination of HTML, CSS, and a touch of JavaScript and jQuery. I've decided to go with MySql as my database. Currently, I have a login system in place where users can create their own accounts on the site. However, I&apo ...

If the condition is based on the category in category.php and single.php

I am attempting to create a conditional statement that will display specific content only if the user is in a particular category or on a single.php page associated with that category. I have experimented with these codes, but unfortunately, neither of the ...

Arrange four divisions so that they are displayed in pairs on each row when the viewport width is smaller

I have a row of 4 div elements aligned horizontally from left to right. Each div takes up 25% of the screen width. I am looking for a solution to make them wrap when the user resizes the screen instead of overlapping each other. .MenuSett { margin-to ...

When attempting to open a popup form by clicking a button, the code fails to function on IE6

Everything seems to be running smoothly on Firefox, however I am encountering issues with Internet Explorer 6. Here is a snippet of the problematic code: document.getElementById('layout').style.opacity = .7 document.getElementById('layout&a ...

How can I enable two-finger scrolling on mobile web browsers?

I am currently tackling a project that involves dragging operations on a canvas, making scrolling with a single finger impractical. My goal is to enable scrolling using two fingers instead. After testing different touch-action values, I discovered that pi ...

Adjust the height of the card body to match the horizontal bootstrap 5 card image

Is there a way to use Bootstrap 5.1.3 to make the image fill the height of the card's body and footer, while also ensuring the card-footer is placed at the bottom of the card? The desired outcome: <link rel="stylesheet" href="https://cdn.jsdeli ...

JavaScript fails to display image slideshows upon loading

Currently, I am utilizing a slideshow feature in order to display any additional images that may be retrieved from the globalgiving api. However, there is an issue with the slideshow not appearing when the page is initially loaded or when opening a modal, ...

Using Bootstrap 4, create a responsive design that centers images within a div on mobile devices and positions them differently

I am currently working on a DIV that contains social media buttons. The code for this DIV is as follows: <div class="redes-sociales col-sm-pull-6 col-md-6 col-lg-push-4 float-right py-2"> <img class="img-rounded img-social" alt="f ...

Issue with allowing the second floating div to occupy the remaining horizontal space inside the container div

Describing the scenario, there is a container division with two floating divisions of different widths. You can view it live by following this link (look for "Hotel booking" section): I have added a border to the second division. My goal is to make this s ...