Ways to ensure even spacing in a responsive header design

On my homepage, I have a large header image that is responsive in the mobile version. However, I am having trouble managing the spacing between the button and text below it. The spacing varies on different mobile screens and sometimes appears larger than intended.

How can I fix this issue? You can view the mobile version here

CSS (One of the CSS codes used for the image header in the mobile version)

@media (max-width: 520px) {
  .home-header-div {
    height: 750px;
  }
  .home-header-h1 {
    font-size: 2em;
    text-align: left !important;
    width: 100% !important;
    margin: 0.75em 0 0 0 !important;
    padding-left: 0.35em !important;
  }
  .home-header-h3-mv {
    padding: 8em 0.75em 0 0.75em;
    display: block;
    line-height: 1.25em;
    font-weight: 300;
    font-size: 1em;
  }
  .home-header-button {
    font-size: 1em;
    top: 33em;
    position: absolute;
    float: none;
    margin: 0 auto;
    display: block;
    text-align: center;
    width: 90% !important;
    line-height: 1.20em;
  }
  .home-header-p-mv {
    margin: 27em auto;
    font-size: 1em;
  }

<a class="button-125em button-all home-header-button" href="/calculate-your-loan/" target="_blank"><span class="calculator">Calculate your loan now</span></a>

}
cssmobileresponsive-designresponsive-images

Answer №1

Consider trying to use the % unit instead of em. The em unit is typically used for font relative sizing and may not work effectively across different devices when used for padding or margin.

For more information, take a look at: Why should we use em instead of px?

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

What is the best way to create a CSS class for a list element in React?

I am facing an issue with styling buttons in my UI. These buttons represent different domains and are dynamically generated based on data fetched from the server using the componentDidMount() method. Since I do not know the quantity of buttons at the time ...

javascriptcssreactjsstate

Revolutionary CSS and jQuery for an Exceptional Top Navigation Experience

I would like to create a top navigation similar to the one on Facebook, using CSS and jQuery. Here is an example: Additionally: Notice how the arrow in the popbox always remains beneath the selected navigation item, and all popboxes have the same width. ...

jqueryfacebookcssfacebook-like

Placing two tables in an HTML document

I am working on integrating two tables into my web application and I would like them to be positioned on the same row horizontally. <span><table><tr><td>A</td><td>B</td></tr></table></span> <s ...

csshtml

Attempting to personalize the CSS for a tab within a table in Material design is unsuccessful

Within my Angular 5 application, I have implemented the Material API. One of the components in my project is a table with 2 tabs structured like this: <mat-tab-group> <mat-tab> <mat-table> <!-- content --> </mat- ...

cssangularangular-materialangular5

I just obtained the height measurement of a dynamic table - now I must transfer this height value to a different element

Recently, I encountered a situation where I needed to get the height of a dynamic table using code like this: var table = document.getElementById("test"); document.write(table.offsetHeight); However, the challenge arose when I realized that I also needed ...

javascripthtmlcss

Utilizing loop variables in ng-class and ng-click directive

This piece of code generates a list consisting of seven thumbnails, with the currently active image designated by the active and thumb classes. <div ng-repeat="no in [1, 2, 3, 4, 5, 6, 7]"> <img ng-src="images/{{no}}t.jpg" class="thumb" ng ...

javascriptcssangularjs

No translation or compiling of SCSS/SASS to CSS available

As a beginner Sass user, I am working on mastering the SMACSS hierarchy and incorporating it into my project using Brackets. However, I have encountered an issue with mapping the main.scss file to the main.css file even though it compiles successfully via ...

csssasscompass-sassadobe-brackets

challenge encountered while trying to remove ScrollTop feature on mobile gadgets

Currently facing a challenge with responsive design - I have implemented a sticky navbar effect that works seamlessly on desktop, but causes usability issues on mobile. When scrolling down on the mobile version, the sticky navbar obscures the text on the s ...

jqueryhtmlcss

Troubleshooting CSS Issues in ASP.NET Boilerplate

I am attempting to apply a CSS style to a text input similar to the one found on the CreateUser default page. However, I am encountering an issue where the blue line under the textbox does not appear when I navigate away from and then return to the page. ...

htmlcssangularaspnetboilerplate

Is there a way to incorporate a CSS file into this without explicitly mentioning the color?

I have successfully implemented a PHP solution for changing themes with a cookie that remembers the selected theme color when the user leaves the site. However, I now need to switch this functionality to JavaScript while still utilizing the CSS file. How c ...

javascriptphpcsscookiesthemes

Adjust the size of the input form

Trying to create this design: But currently stuck with this layout: I'm puzzled on how to resize the input field with an icon on the right while using col-md-12... Check out my code below: .form { margin-top: 8px; margin-left: 13px; displ ...

htmlcssreactjsreact-css-modules

What is the reason for the ID "home-ad" not functioning properly in Firefox?

While working on some CSS styling, I encountered an issue with the ID "home-ad" not displaying properly in Firefox. The box model was showing a content size of 0x-40 (with 40 being the padding value). Interestingly, when I changed the ID name, the code wor ...

htmlcssfirefox

CSS - Organization of Rows and Columns

I am in the process of designing a website that will feature news content, and I would like to give it a layout similar to a reddit news box. The layout would resemble the following structure. I am using angular material and CSS exclusively, without any fr ...

htmlcss

How do I utilize the Material-UI slider's activated (CSS API) feature to conceal the shadows?

Can someone please explain to me how I can use the activated class to change the style of the thumb and hide its shadows? According to the official website, the activated class is applied to the track and thumb elements to trigger JSS nested styles when a ...

cssreactjsmaterial-ui

Ways to Ensure the Footer Stays Beneath Your Image Gallery

After successfully keeping the footer at the bottom of other pages on my website, I'm facing a challenge with my photo gallery page. The footer stubbornly sits in the middle of the page. :( This is the HTML code for that particular page: html { ...

htmlcsssticky-footer

Tips for obtaining the sources of every image on a webpage and consolidating them in a single section

My goal is to preload all images on a webpage into a single division before the page loads. For example, if there are 5 images on the page (eg1.png, eg2.jpg, eg3.bmp, eg4.jpg, eg5.png), I want them to be contained within a div with the id 'pre'. ...

javascriptphpjqueryhtmlcss

Whenever I press a button, my desire is for each picture to seamlessly reposition itself in the exact same spot on the screen

Having some issues with my code. When I click a button, the plan is for the pictures to change one by one to simulate a traffic light sequence. However, when I run the code, all the pictures appear at once without any effect from the button. Any help in ac ...

javascripthtmlcss

Adjust color scheme of drop-down menu

Having trouble changing the background color for my drop down menu. I tried to change the color for the sub div but it's not working. Can anyone help me fix this issue? Here is the code snippet: http://jsfiddle.net/3VBQ6/4/ #nav li:hover ul.sub li { ...

javascriptjqueryhtmlcss

Problems arising from Jquery append functionality

When using the append method, my inner div is only attaching one WHEAT-COLORED-BOX, whereas when using appendTo, my inner div attaches all the required number of WHEAT-COLORED-BOXES. Therefore, in this case, appendTo gives the correct result while append f ...

javascripthtmljquerycssnode.js

Menu options moved to the right of the screen

I am encountering a small issue with my dropdown menu that I can't seem to solve. The first item in the dropdown menu appears correctly, but the second item is slightly shifted to the right. It seems like the margin-right applied to the link may be c ...

csscss-position