The buttons will move down when the heading tag is enlarged

I’ve been developing a mobile site and came across some code that’s causing an issue.

<div class="profile-div-wrapper">
   <div class="profile-div">
    <div class="header">
     <img src="assets/images/image.png" alt=""><h3 id="txtDisplayUserName">Surajjjjjjjjjjj Shukla</h3>
     <a href="update_user_profile.html" class="bttn3">Edit Profile</a>
    </div>
   </div>
</div>

The problem occurs when the heading is too large, causing the "Edit Profile" anchor to shift below.

Here's a link to the fiddle with the same issue. Any suggestions on how to fix this?

Please keep in mind to adjust the fiddle to simulate a mobile device size so you can see the problem clearly.

htmlcss

Answer №1

Cascading Style Sheets

Consider incorporating the following snippet into your current code:

.profile-div .header {
  display: flex;
  align-items: center;
}
.profile-div .header a.btn3 {
  margin-left: auto; //updated from float: right;
  display: flex; //changed from display: block;
  //to align text inside button both vertically and horizontally
  align-items: center;
  justify-content: center;
}

https://jsfiddle.net/tnWgU68L/

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

Outlook not adding padding to button in HTML email

https://i.stack.imgur.com/vMgGS.png Is there a way to apply the same padding to the border as seen on the button above? Adding the border directly to the td element seems like a solution, but it is not feasible due to the presence of border-radius in anot ...

htmlemailbuttonhtml-email

Different ways to adjust the position of the popup dialog in Vuetify

<v-dialog v-model="dialog" max-width="250" class="pa-6" > <v-card class="scroll" min-height="300" max-height="700" color="rgb(255, 255, 255, 0.7)"> ...

cssvue.jspopupvuetify.js

Usage of `ng-disabled` on anchor tag within `li` element

Is there a way to deactivate a specific drop-down menu item that utilizes ui-router and is structured like this? <ul class="dropdown-menu"> <li><a ui-sref="state.random">A random state</a></li> </ul> Attempting th ...

htmlangularjs

Design a custom JavaScript component for seamless integration with CSS styling

Currently working on a JavaScript API using jQuery for my website. In one part of the code, I am attaching an object that contains CSS to an element like this: $(element).css(theVariable); The expected outcome should match this CSS code snippet: h3 { ba ...

javascriptjqueryhtmlcss

Transform to CSS Selector

Having trouble clicking on the image button below using Xpath? Here is the HTML tag for the Image Button: HTML Script <img src="../../../../imagepool/transparent%21tmlservicedesk?cid=1" id="reg_img_304316340" aralttxt="1" artxt="Show Application ...

htmlseleniumselenium-webdrivercss-selectors

Displaying HTML code through Alert() is a convenient way to showcase snippets of

Can alert() or another pop-up be used to show actual HTML code? For instance, the following code snippet: var range = selection.getRangeAt(0); var newNode = document.createElement('span'); newNode.setAttribute("class", "selectedText"); range.sur ...

javascriptjqueryhtml

Integrating objects into the <select> element through the combination of C#, JavaScript, and HTML connected to a SQL

Can someone assist me in resolving this issue? I am trying to populate an HTML element with database fields using C# and JavaScript, but so far my code is not producing any output. I have also attempted to include a button that calls the "loadGrp" function ...

javascriptc#htmlsql-server

CSS hover effect with multiple image overlays on one area upon mouseover

I've been working on a map project that involves changing the color of multiple areas upon hovering using CSS. I've set up the main div with position:relative, and positioned the images inside absolutely to create hover effects by transitioning o ...

csshtmlimagedictionary

Fill the rows of the <Table> using HTML code

I am encountering an issue with displaying data in a table on a screen: <table id="TransactionTable" class="table table-responsive table-striped"> <thead> <tr> <th></th> <th>Date</ ...

javascripthtml

Utilizing Images as Selections within a Form: Step-by-Step Guide

Currently experimenting with the newest Bootstrap v4.0 beta, I am working on crafting a registration form. In this scenario, instead of a traditional dropdown or radio button, I want to implement images for users to choose between Male and Female. <d ...

htmltwitter-bootstrapbootstrap-4

Display the CSS dropdown menu as a block`

I've been attempting to design a dropdown menu. My goal is for the anchor tag to display when hovered over. I understand that using display:block won't work when the 'a' is not part of the block, but I'm unsure how to proceed. Any ...

htmlcss

What is the reason a statically positioned element appears behind an absolutely positioned one?

I understand that absolute positioning disrupts the normal flow of elements, but I expected the display order to reflect the order in which elements are placed in the HTML code. .absolute { position: absolute; width: 100px; height: 100px; ...

htmlcss

once an image begins to delete upon clicking, it will continue indefinitely

After creating a button and adding Math.floor(Math.random() * 2 + 1) to generate random correct and wrong answers, you also included 5 images as life counters. When a wrong answer is chosen, one of the images is supposed to be hidden or removed. However, t ...

javascripthtmlcss

Identifying whether a class exists on the same level using a selector

Snippet display: $( document ).ready(function() { //$(".tree-node").parents('.tree-child-folders').css("color", "red"); //$(".tree-collapsed:has(.tree-child-folders)").css("color", "red"); $(".tree-node > .tree-collapsed:has(.tree-child ...

jqueryhtmlcss

Enhance your Vue app by dynamically modifying classes with Tailwind

I am working on a Vue3 application that utilizes Tailwinds configured in the tailwind.config.js file. My question is, can I dynamically modify the value of a preconfigured class from the tailwind.config.js file? For instance: tailwind.config.js: const d ...

cssvue.jstailwind-css

What's the best way to place the text or operator from a button into an input field?

Hello, I am currently working on developing a calculator. However, I have encountered an issue where clicking on operator buttons such as +, -, /, *, and the dot button does not add them to my input field. Additionally, when these buttons are clicked, the ...

javascripthtmlcss

What is the reasoning behind having blank space between the buttons?

Can anyone help me understand why there is visible space between the buttons in the code example provided below? Despite removing margins and paddings, the whitespace persists. <body> <div class="button-container"> <button>1& ...

htmlcssbutton

The storing of data in an HTML form input

Within my submission form, there are five distinct inputs that users can enter and submit. Currently, the entered data is being written to a .txt file successfully. Nevertheless, the objective is to organize and display the information in an easily readabl ...

htmlmysqlformsexcelcsv

Align checkboxes horizontally to resemble a progress bar styling

Currently, I have a series of checkboxes that are displayed sequentially on the page. <div class="myCheck"> <h5>Here's what you've selected so far</h5> <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect ...

cssmaterial-design

Tips for eliminating the entire link from the footer section

Whenever a link is hovered over, a white box displaying the full URL appears at the bottom left of the browser. Is there a way to remove this feature from my website? I appreciate any assistance with this issue. Thank you! ...

htmlcssbrowserhyperlink