Issue with CSS on various mobile devices

Using this CSS to display a fixed part at the bottom of the mobile screen, I noticed that it works well on the Samsung Grand Prime but appears narrower on the Samsung J7 Max. Here is the code snippet and images for reference:

.footer {
    position: fixed;
    left: 0px;
    right: 0px;
    bottom: 0;
    width: 100%;
    background-color: #fff;
    color: #b1b1b1;
    height:65px;
    text-align: center;
    padding:0px;
    -webkit-box-shadow: 0px -3px 3px 0px rgba(133,133,133,1);
    z-index:10000;
} 

.kafyfooter{
 display:block !important;   
 z-index:10000;}
 
.footermenu {
    width:7%;
    background:#fff;
    height:100%;
    padding:22px;
    display:inline;
    float:left;
    -webkit-box-shadow: inset 0px 0px 1px 1px rgba(204,204,204,1);
    -moz-box-shadow: inset 0px 0px 1px 1px rgba(204,204,204,1);
    box-shadow: inset 0px 0px 1px 1px rgba(204,204,204,1);
}

Samsung Grand Prime Picture: https://gyazo.com/9eaf2240c5d0f91a4d57c3a787598e4f

Samsung J7 Max Picture: https://gyazo.com/2c48dc559c3a5e9948fc0c6b11a8ae71

cssresponsive

Answer №1

width: 7%; appears to be insufficient (resulting in the menu item stretching to accommodate its contents, which may vary based on screen resolution).

To address this, adjust the width accordingly or implement a grid layout for your footer. (edit: I suggest using display: grid; for your footer)

Furthermore, for consistency across different devices, consider utilizing units like vh, vw, rem, etc. instead of px (check out https://www.w3schools.com/cssref/css_units.asp), as pixels can range from being extremely small to clearly visible block elements depending on the screen size.

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 2+ with the [innerHTML] property to incorporate HTML with added style attributes

I am currently utilizing Angular 2+ [innerHTML] input for inserting HTML formatting that includes style tags. Within my template, the code looks like this: <span [innerHTML]="someVar"></span> In the component file, I have defined: someVar = ...

javascriptcssangular

Creating a custom dropdown behavior using Angular

I have a unique interface requirement where users must be able to click on an element to view its options, which are displayed as checkbox inputs. Essentially, I need a custom 'select' element that allows for multiple checkbox selections. ...

jqueryhtmlcssangularjs

Using Bootstrap to style the <option> element with RGBA colors

Struggling to figure this out and seeking assistance. I have a form using bootstrap where I can apply rgba color for my select tag but not for the options. Select CSS: select { background-color: rgba(0,0,0,0.25) !important; border: 1px solid rgba ...

jqueryhtmlcsstwitter-bootstrap

What is the best way to delete a container when its child element includes a specific string?

I run a website that compiles video clips from various sources, including YouTube. Occasionally, some clips appear as private videos. I am looking to use jQuery to apply the display:none; property to the entire div when the class a.colorbox.cboxElement con ...

javascriptjqueryhtmlcss

Is there a way to insert a dot after every two digits in a text field using Javascript upon keypress?

When inputting a 4-digit number (e.g. 1234) in my text field with value format 00.00, I want it to automatically adjust to the 12.34 format. How can I achieve this behavior using JavaScript on keyup event? ...

javascriptjqueryhtmlcss

Is it possible for a div nested within another div to still occupy space on the page despite being set

<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $("select#choosebook").change(function(){ $(".title").slideDown(" ...

javascripthtmlcss

Issue with Material Design Lite input floating label not functioning properly post page navigation

I am currently developing a mobile hybrid application using Material Design Lite, but I have run into a small issue. When I add input field elements to my pages, the floating text and placeholder do not function properly. In my application, I am utilizing ...

angularjshtmlcssmaterial-design-lite

Customizing Material UI tooltip styles with inline CSS formatting

Currently in the process of creating a React component that utilizes the Material UI Tooltip feature. In my component, I have the need to manually reposition the Mui Tooltip by targeting the root popper element (MuiTooltip-popper). However, the Mui Toolti ...

javascriptcssreactjsmaterial-ui

Adjusting the z-index of the tinyMCE toolbar

I have been utilizing the tinyMCE editor plugin, which transforms textareas into iframes and displays a toolbar at the top of the content. It has been functioning flawlessly. However, there are times when there are videos placed above the content. In such ...

jquerycsstinymce

When hovering, transition occurs unless the cursor is over a specific element

I have created a small box element with a close button that looks like this: ___ | X| ‾‾‾ In order to make it more interactive, I applied some CSS so that when hovered, the box expands like this: ___________________ | X| ‾ ...

csscss-transitionstransition

Adjust the CSS to give <a> elements the appearance of plain text

Is it possible to style an anchor tag to appear identical to plain text? Consider the following scenario: <p> Here is some text and here is a <a class='no-link' href="http://www.example.com" >link</a></p> I have atte ...

htmlcss

Radio buttons are not having the :invalid pseudo class properly applied

Looking to style a radio group with a required attribute. Attempting to adjust the appearance of the radio group depending on whether an input is selected or not. However, it appears that the :invalid pseudo-class does not apply to radio buttons. ...

csshtmlradio-button

Preventing CSS shapes from overlapping with the next DIV

I'm currently working on creating a V-shape using CSS. While I have successfully created the shape, I am facing an issue where I cannot get the shape to appear "above" another div with a background image when it is placed before it and made negative. ...

csstwitter-bootstraptwitter-bootstrap-3shapes

Having trouble with my Bootstrap 4 navbar button - what am I doing wrong?

After conducting research online, I found myself unable to resolve my issue due to my lack of proficiency in English. I apologize for any confusion caused and would like to revisit the topic. The problem lies with my navbar toggle that is not functioning ...

javascripthtmlcssbootstrap-4

Upon selecting the checkbox, the user will be redirected to an input textbox

Can I make it so that when I check a checkbox, it automatically directs me to a textbox as if I pressed the TAB key? Is there a way to achieve this using only HTML and CSS? ...

htmlcsshttp-redirectcheckbox

Create a dynamic animation using Angular to smoothly move a div element across the

I currently have a div with the following content: <div ng-style="{'left': PageMap.ColumnWrap.OverviewPanelLeft + 'px'}"></div> Whenever I press the right key, an event is triggered to change the PageMap.ColumnWrap.Overvie ...

javascripthtmlcssangularjs

Positioning and resizing elements based on varying screen sizes and levels of zoom

I recently designed a basic webpage using HTML with two main elements - a chat window for user interaction and a chart.js plot. Here is a snippet of the HTML code: <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

htmlcss

Is the default animation duration of Compass being ignored?

After recently updating to Compass version 1.0.16, I started setting up basic usage of the new animation features. However, I encountered an issue where setting default values for different animation settings did not take effect. This led me to hard-code t ...

cssanimationsasscompass-sass

Use of absolute positioning resulted in the disappearance of the element

Can anyone assist with resolving the issue I am encountering? I currently have three nested divs as follows: <div class="section"> <div class="parent"> <div class="child"> Some random text. </div> </div> </div> To adj ...

javascripthtmlcss

Resolving the issue of the 'Failed to load resource: net::ERR_FILE_NOT_FOUND' error

I'm encountering issues with loading my CSS in different browsers when using the "Copy Path" feature in VSCode. While everything displays correctly in preview mode within VS, none of the styles appear when pasting the path into Chrome or Edge. Below ...

htmlcssfile-not-found