Adjusting the position alters the dimensions of the image

Looking to position an emoji-panel in the bottom right corner with dimensions relative to the screen width. Everything works fine when position is set to not fixed (see first image). However, switching the position to fixed causes strange changes to both the background panel and emojis inside it (see second image).

https://i.sstatic.net/cCUwM.jpg https://i.sstatic.net/Bq2uz.jpg

HTML Code:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
    .panel{
                /*position:fixed;*/
                     bottom: 0;
                     right: 0;
                     width:100%;
                     height:7%;
                     background-color:#dbd9d3;
                     border:1px solid black;
                }
         .panel_emojis{
                width: 14%;
                height: 14%;
                margin-right: 1.1%;
                margin-left: 1.1%;
                }
</style>
</head>

<body>
<div class="panel">
<img src="emoji.png" class="panel_emojis" />
<img src="emoji.png" class="panel_emojis" />
<img src="emoji.png" class="panel_emojis" />
<img src="emoji.png" class="panel_emojis" />
<img src="emoji.png" class="panel_emojis" />
<img src="emoji.png" class="panel_emojis" />
</div>
</body>
</html>

Is there a way to reposition it to the bottom right without affecting the size of the background and images?

htmlcssresponsive-design

Answer №1

Hey there! I made a simple adjustment to your code by removing the height attribute from the emoji image, which makes it look perfect within the container. Here's the updated code for your convenience:

    <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
    .panel{
                position: fixed;
                     bottom: 0;
                     right: 0;
                     width:100%;
                     /* height:10%; */
                     background-color:#dbd9d3;
                     border:1px solid black;
                }
         .panel_emojis{
                width: 14%;
                height: 14%;
                margin-right: 1.1%;
                margin-left: 1.1%;
                }
</style>
</head>

<body>
<div class="panel">
<img src="emoji.png" class="panel_emojis" />
<img src="emoji.png" class="panel_emojis" />
<img src="emoji.png" class="panel_emojis" />
<img src="emoji.png" class="panel_emojis" />
<img src="emoji.png" class="panel_emojis" />
<img src="emoji.png" class="panel_emojis" />
</div>
</body>
</html>

If you prefer not to remove the height attribute completely, another option is to set the height of panel_emojis to height: 100%;, allowing the image to use the full height of the container (in this case, the panel). The following code demonstrates how adjusting only the panel_emojis height can work effectively without altering the panel height itself: [Note: I increased the panel height in this example so that the entire image is visible]

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
    .panel{
                position: fixed;
                     bottom: 0;
                     right: 0;
                     width:100%;
                     height:25%;
                     background-color:#dbd9d3;
                     border:1px solid black;
                }
         .panel_emojis{
                width: 14%;
                height: 100%;
                margin-right: 1.1%;
                margin-left: 1.1%;
                }
</style>
</head>

<body>
<div class="panel">
<img src="emoji.jpg" class="panel_emojis" />
<img src="emoji.jpg" class="panel_emojis" />
<img src="emoji.jpg" class="panel_emojis" />
<img src="emoji.jpg" class="panel_emojis" />
<img src="emoji.jpg" class="panel_emojis" />
<img src="emoji.jpg" class="panel_emojis" />
</div>
</body>
</html>

In my opinion, adding padding to your emoji images can enhance their appearance. Additionally, using percentage values for height and width may not always produce the desired result.

Answer №2

If you want to easily center the items inside the .panel, consider adding display: flex to it. The issue with using position: fixed is that the height for the .panel was not set, causing the .panel_emojis to appear strange due to the inherited height and width properties set in percentages. It's recommended to avoid excessive use of percentage values if unsure about their effect; opting for pixel values (px) can be a better alternative.

I hope this suggestion proves helpful. Feel free to correct me if I am mistaken.

.panel{
  position:fixed;
  display: flex; /* Use display: flex; justify-content for auto margin the item inside .panel */
  justify-content: space-between;
  bottom: 0;
  right: 0;
  width:100%;
  background-color:#dbd9d3;
  border:1px solid black;
}

/* Leave width and height in .panel_emojis to default (auto) instead of using specific values */
.panel_emojis{
  // width: 14%;
  // height: 14%;
  margin-right: 1.1%;
  margin-left: 1.1%;
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
    
</style>
</head>

<body>
<div class="panel">
  <img src="https://via.placeholder.com/120" class="panel_emojis" />
  <img src="https://via.placeholder.com/120" class="panel_emojis" />
  <img src="https://via.placeholder.com/120" class="panel_emojis" />
  <img src="https://via.placeholder.com/120" class="panel_emojis" />
  <img src="https://via.placeholder.com/120" class="panel_emojis" />
  <img src="https://via.placeholder.com/120" class="panel_emojis" />
</div>
</body>

Answer №3

Swap out fixed for flex:

Flex is the way to go for these types of scenarios, offering a responsive layout that adapts well.

Check out the fiddle to experiment with it yourself.

.panel {
  display: flex;
  justify-content: space-between;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 7%;
  background-color: #dbd9d3;
  border: 1px solid black;
}

.panel_emojis {
  width: 14%;
  height: 14%;
  margin-right: 1.1%;
  margin-left: 1.1%;
}
<!DOCTYPE html>
<html>

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

  </style>
</head>

<body>
  <div class="panel">
    <img src="http://placekitten.com/301/301" class="panel_emojis" />
    <img src="http://placekitten.com/301/301" class="panel_emojis" />
    <img src="http://placekitten.com/301/301" class="panel_emojis" />
    <img src="http://placekitten.com/301/301" class="panel_emojis" />
    <img src="http://placekitten.com/301/301" class="panel_emojis" />
    <img src="http://placekitten.com/301/301" class="panel_emojis" />
  </div>
</body>

</html>

Answer №4

CSS Styling

body{
   position: relative; 
}

.panel { 
   position: absolute; 
   bottom: 0; 
   right: 0; 
   width:100%; 
   height:7%; 
   background-color:#dbd9d3; 
   border:1px solid black; 
} 
.panel_emojis{ 
   width: 14%; 
   height: 14%; 
   margin-right: 1.1%; 
   margin-left: 1.1%; 
}

No changes were made to the sizing, but it is recommended not to use percentages for setting margins. It would be better to set a fixed pixel width and height for the emojis instead of using percentages.

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

Updating a post in Vue.js using its unique id

Recently, I delved into the world of vue.js and stumbled upon this intriguing question on Stack Overflow. It provided some valuable insights on how to fetch posts from a database using v-for. Upon loading each post, I noticed the presence of Edit and Dele ...

htmlvue.js

Remembering position in JSP using Java Beans

In my "Web Engineering" assignment, I am tasked with developing a Web Application game using JSP, Servlets, and Java Beans. The game mechanics are already in place with the Servlet controlling the algorithms, JSP handling the Model/View, and Beans managing ...

javascriptjqueryhtmljspjavabeans

The alignment of Bootstrap's Tabs is not centered as expected

I'm having trouble aligning the tab list to the center. The image below shows that it's currently shifted to the left. I've already included the Bootstrap class center-block, but it doesn't seem to be working. Can anyone help me out wit ...

htmlcsstwitter-bootstrap

Tips for Customizing the Width of Your Material UI Alert Bar

At the moment, I have refrained from using any additional styling or .css files on my webpage. The width of the Alert element currently spans across the entire page. Despite my attempts to specify the width in the code snippet below, no noticeable change ...

javascriptcssreactjstypescriptmaterial-ui

What is the integration of Google URL format with a PHP application?

When it comes to php websites, URLs are commonly written in the form of page.php?id=123 or rewrite moded page/Id/123 However, when looking at google I observed that URLs look more like google.com/search?q=Wordpress I attempted to structure website links ...

phphtmlurlcurl

The Bootstrap datetimepicker is malfunctioning, displaying an error in the console stating that '$' is not defined

I'm currently using the bootstrap datetimepicker but it doesn't seem to be working correctly. Can someone please point out what I might be doing wrong? Here are the links that I have provided: <script src="{{ asset ('css/sidebar/p ...

javascriptjqueryhtml

What is the best way to utilize mysql for storing user state in order to restrict them from taking a particular action more than once per day?

< button type="button" id="daily-reward-button">Claim</button> 1) When a user clicks this button, it should be disabled which will result in the user being banned in the MYSQL database and unable to click the button again. 2) The button shoul ...

javaphphtmlmysqlwordpress

Retrieve CSS content from a file hosted on the local server

Is it feasible to use a locally hosted CSS file for styling a website managed by a server-based CMS? I am interested in utilizing SASS for local CSS development while retrieving the HTML content from a centrally hosted CMS server. ...

htmlcss

When attempting to reload a single page application that utilizes AJAX, a 404 error is encountered

Recently, I've been working on coding my personal website and have successfully created a single page application using ajax. The content is dynamically loaded between the header and footer whenever a navigation bar link is clicked. To enable the back ...

javascripthtmljqueryajax

When pressing the next or previous button on the slider, an error message pops up saying "$curr[action] is not a

I found this interesting Js fiddle that I am currently following: http://jsfiddle.net/ryt3nu1v/10/ This is my current result: https://i.sstatic.net/VygSy.png My project involves creating a slider to display different ages from an array, such as 15, 25, ...

javascripthtmljquerycssbootstrap-4

Manipulating element height in AngularJS

My goal is to utilize the bootstrap style for a fixed navigation bar at the top of the page. By using navbar-fixed-top, I can fix an element to the top. The visibility of #subnav will be determined by the value of showsubnav. <div id="backnav"> ...

javascriptcssangularjstwitter-bootstrap

Generate spacing between rows of content in HTML or CSS without affecting the spacing between lines of text

In my R Markdown document in R, I want to replace the header labeled "Preface" with grey lines for visual indication. Here's the code snippet I've tried: :::{#preface} <p> Text </p> ::: However, there seems to be no margin at the beg ...

htmlcssr

Are Django form widgets like datepicker and tabindex being snubbed?

I have been working on creating a stylish form and managed to find some interesting CSS to enhance it. The form is looking good, however, a couple of fields are not displaying correctly; particularly one that is associated with a choice field as the model ...

jquerycssdjangodjango-forms

The pause button will still function, even if the scrolling feature is enabled

I've successfully implemented a feature that pauses and plays the video on scroll when it reaches a certain pixel height. However, I'm facing an issue where the code automatically plays the video whenever the scroll position is more than 13500px ...

javascriptjqueryhtmlcss

Initiate an Ajax request solely for the elements currently visible on the screen

I am currently facing an issue that requires a solution. Within our template, there are multiple divs generated with the same classes. Each div contains a hidden input field with the ID of the linked target site. My task is to utilize this ID to make aja ...

javascriptjqueryhtmlajaxrest

What is the best way to apply the CssClass "active" when clicking on a link

How can we update the cssClass of a link button on each click event, considering that the page refreshes every time? Currently, when I click on any LinkButton, the default behavior sets the cssClass to Plus LinkButton. ---index.aspx----------- <ul cl ...

javascriptasp.netcssvb.net

Variable in SCSS not being applied as expected

I'm currently grappling with understanding why my alterations to the system colors aren't reflecting as expected. When viewing in Chrome, this is the image I see. https://i.sstatic.net/H6YbW.png However, this is what I anticipate should be vis ...

htmlcssangularsass

Tips on adjusting the SVG view box for optimal visibility in a web browser

Recently, I've encountered an issue with the following code snippet: d3.xml("https://crossorigin.me/https://svgshare.com/i/5w9.svg").mimeType("image/svg+xml").get(function(error, xml) { if (error) throw error; document.body.appendChild(xml.docume ...

csssvg

Position anchor images in a horizontal alignment using a vertical CSS sprite

There are 4 images in a vertical sprite that I want to display horizontally on my page as clickable links. The first image should start at position left:250px and top:2px with a padding of 3px between each image. CSS .sprites { background:url('/ ...

htmlcsscss-sprites

Displaying CSS image slideshow images side by side

Currently I am a student studying the fundamentals of HTML and CSS. My latest project involved creating a website showcasing my work from digital arts class, complete with a simple CSS slideshow. The original intention was to have each image displayed on i ...

htmlcssimagesliderslideshow