The design of websites does not always translate well to mobile devices

While creating a website that is meant to be responsive across both desktop and mobile screens, I encountered an issue. The design looks perfect on desktop screens, but when viewed on a mobile screen, it shrinks and doesn't fit properly. I am using Bootstrap version 5 and have tried setting the width to 100%, but it hasn't resolved the problem. Additionally, my web application is built on .NET. How can I fix this issue?

You can see the issue here:

https://i.sstatic.net/ppLH0.png

This is what I expected (iPad version):

https://i.sstatic.net/h1o88.png

Below is the code snippet:

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">  

  </head>

    <header class="head navigation fixed-top ">
        <img />
        <nav class="navigation">
            <a href="Index">Main Page</a>
            <a href="blog">Blog</a>
            <a href="https://api.whatsapp.com/send?phone=905304500247&amp;text=&amp;source=&amp;data=">Contact</a>
        </nav>
    </header>
    <br />

    <div style="width: 100%; height: 750px; background-color: yellow;  ">
        <div class="example">
            <img style="width: 100%; height: 750px;" class="background-image" src="~/Img/web_site.png">
            <div class="overlay-text">
                <h1>Welcome to our Web Page</h1>
                <p> </p>
            </div>
        </div>
    </div>
    
    <div style="width: 100%; height: 450px; background-color: black; padding-left: 20px; text-align: center; ">
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <h2 style="color: white; top: 50%; right: 50%; ">We're happy to be a leading software</h2>
        <h2 style="color: white; top: 50%; right: 50%;">company in İstanbul</h2>
        <h2 style="color: white; top: 50%; right: 50%;">solutions for today's enterprise companies.</h2>
        <br />
        <br />
        <a href="https://api.whatsapp.com/send?phone=905304500247&amp;text=&amp;source=&amp;data="><button onclick="window.location.href='/Home/login_page'" class="btncomminicate">Contact Us</button></a>
    </div>

CSS Code:

   @@media only screen and (max-width: 600px) {
        .body {
            margin: 0;
            padding: 0;
        }
    }

    html, body {
        margin: 0px;
        height: 100%;
        padding-top: 0px;
        padding-bottom: 0px;
    }

    .example {
        position: relative;
    }

    .overlay-text {
        background-color: rgba(255, 255, 255, 0.5);
        padding: 20px;
        text-align: center;
        position: absolute;
        top: 50%;
        right: 50%;
        transform: translate(50%, -50%);
    }

    .head {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        padding: 20px 100px;
        height: 70px;
        background-color: #000000;
        display: flex;
        /* justify-content: center; */
        justify-content: center;
        align-items: center;
        z-index: 99;
    }

    .navigation a {
        position: relative;
        font-size: 1.1em;
        color: white;
        text-decoration: none;
        font-weight: 500;
        margin-left: 40px;
    }

    .navigation a::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -6px;
        width: 100%;
        height: 3px;
        background: white;
        border-radius: 5px;
        transform-origin: right;
        transform: scaleX(0);
        transition: transform .5s;
    }

    .navigation a:hover::after {
        transform-origin: left;
        transform: scaleX(1);
    }

    .btncomminicate {
        width: 500px;
        height: 50px;
        background: transparent;
        border: 2px solid yellow;
        outline: none;
        border-radius: 6px;
        cursor: pointer;
        font-size: 1.1em;
        color: yellow;
        font-weight: 500;
        margin-left: 40px;
    }

    .btncomminicate:hover {
        width: 500px;
        height: 50px;
        background: yellow;
        border: 2px solid yellow;
        outline: none;
        border-radius: 6px;
        cursor: pointer;
        font-size: 1.1em;
        color: black;
        font-weight: 500;
        margin-left: 40px;
    }

Answer №1

The reason for this issue is that when the screen width is smaller than 500px, the "Contact Us" button, which has a fixed width of 500px, exceeds 100% of the width and causes empty space on the right side.

These specific lines of code are responsible:


.btncomminicate {
  width: 500px;
}

.btncomminicate:hover {
      width: 500px;
}

To resolve this problem, you can change the width to a percentage value (width: 75%) or remove these two lines to allow the width to adjust automatically.

In my experience, I prefer adding padding instead of specifying exact width and height for buttons (you can remove height: 50px if you use this method):

/* You can try something like this - adjust units as needed */
.btncomminicate {
  padding: 1rem 2rem;
}

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

Working with GridView Operations in ASP.NET: Adding, Updating, and Deleting

I need to implement gridview population in an ASP.NET web application. While I can currently achieve this, my specific requirement is to customize it based on user authentication. For example, if an Admin is logged in, they should have authorization to ed ...

What is the method to obtain the dimensions of the browser window using JavaScript?

In my JavaScript code, I am trying to retrieve the browser window size and then set the size of a div element accordingly. I have two div elements that should adjust based on the window size. For example, if the window size is 568px, div1 should be 38% of ...

The toast feature in Bootstrap 5 seems to be malfunctioning as it does not display properly despite the absence of any

Why isn't the Toast displaying in the code snippet below? I'm using bootstrap 5. I'm puzzled because there are no errors in the developer's tools. Any assistance would be greatly appreciated. <!DOCTYPE html> <html lang="en"& ...

Why is the label on my styled checkbox shifting position?

While custom styling a checkbox, I'm facing an issue where the label next to it keeps shifting. When unchecked, it aligns itself at the bottom of the box, but upon checking, it moves to center align with the box. .check { width: 100%; font-we ...

Position the navigation bar links to align with the image using bootstrap 5

I have implemented the basic navbar from the Bootstrap website, along with flex-direction set to "column" to display the image above the menu items. https://getbootstrap.com/docs/5.0/components/navbar/ Currently, I have a logo that I want to place with l ...

Sort by label using the pipe operator in RxJS with Angular

I have a situation where I am using an observable in my HTML code with the async pipe. I want to sort the observable by the 'label' property, but I'm not sure how to correctly implement this sorting logic within the pipe. The labels can be e ...

Mastering the placement of script tags in your Next.js application with Next Script

I'm in the process of integrating a third-party script into my Next.js website. This particular script adds an iframe right below its corresponding script tag. Therefore, it is crucial for me to have precise control over the placement of the script ta ...

The CSS styles are failing to be applied to the submit button once it has been

When I have a form with a submit button that triggers a form submission on a PHP page, I want to have an onclick event on the submit button that changes its opacity using JavaScript. The issue I am facing is that after clicking the submit button, the opaci ...

In a local setting, the KendoUI chips are displaying without their borders

I recently tested out the code from kendo on StackBlitz and it worked perfectly: https://i.stack.imgur.com/Nrp2A.png However, when running the same code on my localhost, all the styling for the chip is missing: https://i.stack.imgur.com/1pUH9.png The c ...

The issue of background and footer distortion arises in PhoneGap when the keyboard is opened

Currently, I am experiencing screen problems with phonegap. The issue arises when a keyboard is opened, causing the back button at the bottom of the page to move above the keyboard and resulting in the background image appearing shorter. How can this be re ...

Utilizing Validation Tag Helper for ASP.NET 5 Development

I'm in the process of learning how to develop an ASP.NET 5 app on my Mac. One of the challenges I'm facing is figuring out how to properly implement the validation tag helper in my project. Here's a snippet of the code in my view: <form ...

Customize the default tab appearance in bootstrap version 5.2

Is there a way to customize the appearance of these tabs? I'm looking to change the color to match the primary color of Bootstrap. https://i.sstatic.net/6HaUO.png instead of https://i.sstatic.net/qHUZ9.png <!DOCTYPE html> <html> & ...

What sets apart :first-child from :first-of-type?

I need help understanding the distinction between element:first-child and element:first-of-type Let's consider a scenario where you have a div element div:first-child → Refers to all <div> elements that are the first child of their parent. ...

CSS :hover activates only when the mouse is in motion

Looking at a simple example I put together: HTML <div id="sample"></div> CSS #sample { width:400px; height:400px; background-color:green; display:none; } #sample:hover{ background-color:red; } It's a hidden DIV tha ...

How can I enhance Parallax scrolling performance on Chrome?

I recently completed a tutorial from the following link: After customizing it by changing the image to something different than clouds, I noticed that my version of the website was experiencing lag issues in Chrome but worked fine in Firefox. However, whe ...

Positioning close icon on Bootstrap 4 tab

I need help aligning a close icon for a BootstrapVue tab with Bootstrap 4.2 in the top right corner. Here is my code: <b-tab v-for="order in tabs" :key="order.id"> <template slot="title"> <span class="float-left">{{ order.nam ...

Filling a selection menu with options retrieved from a database

I am currently working on an asp.net page that displays a list of products pulled from a database, along with edit and delete buttons. When a user clicks the edit button, they should be able to modify the product details. I have successfully retrieved data ...

The functionality for selecting text in multiple dropdown menus using the .on method is currently limited to the first dropdown

Having trouble selecting an li element from a Bootstrap dropdown and displaying it in the dropdown box? I'm facing an issue where only the text from the first dropdown changes and the event for the second dropdown doesn't work. <div class="dr ...

JQuery - Enormous Delay in ScrollTop

Currently, I am developing a simple website with JQuery's ScrollTop functionality for the top navigation bar. However, I encountered a specific issue that I can't resolve. When scrolling down past 50 pixels, the navbar shrinks as intended. But t ...

There is a discrepancy between PHP encryption and asp.net encryption methods

Check out this .NET code snippet public string GetMD5Hash(string name) { MD5 md5 = new MD5CryptoServiceProvider(); byte[] ba = md5.ComputeHash(Encoding.UTF8.GetBytes(name)); StringBuilder hex = new StringBuilder(ba.Length * 2); foreach (b ...