What could be causing my button to be elongated in a vertical direction when a logo image is present

I am currently utilizing tailwindcss for my project. Within a flexbox container, I have placed a login button which appears to be stretched out.

<nav font-am class="m-6 text-xl">
      <div class="flex flex-row justify-between container">

        <div>
          <img src="./img/Logo.png">
        </div>

        <div class="flex flex-row">
          <a href="#"><img src="./img/AccountLog.png"></a>
          <p class="hidden md:flex">My Account</p>
        </div>

        <div class="flex flex-row">
          <a href="#"><img src="./img/love_symbol.png"></a>
          <p class="hidden md:flex">My List</p>
        </div>

        <div class="flex box-border flex-row">
          <a href="#"><img src="./img/LockLogo.png"></a>
          <button class="bg-darkPink hover:underline text-white font-bold py-2 px-4 rounded-full" role="button">Sign In</button>
        </div>

      </div>
    </nav>

When the logo is present:

The button returns to its normal appearance once the logo is removed:

How can I ensure that the button maintains its normal appearance even with the logo included? Could the size of the logo be affecting the button's display?

htmlcssflexboxtailwind-cssweb-frontend

Answer №1

Your button is set as a stretched flex element in a flex row. To resolve this issue, you have a few options:

  • Align the row elements to the center instead of stretching them. You can use `.self-center` for this purpose, or apply it at the row level.
  • Alternatively, wrap the button in a div. This will make the div the stretched element, requiring you to center the button vertically using additional styles.

Both solutions are demonstrated below.

.bg-darkPink {
  background: pink;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" integrity="sha512-wnea99uKIC3TJF7v4eKk4Y+lMz2Mklv18+r4na2Gn1abDRPPOeef95xTzdwGD9e6zXJBteMIhZ1+68QC5byJZw==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<nav font-am class="m-6 text-xl">
  <div class="flex flex-row justify-between container">
    <div class="flex box-border flex-row">
      <a href="#"><img src="https://via.placeholder.com/80"></a>

      <button class="bg-darkPink hover:underline text-white_disabled font-bold 
                     py-2 px-4 rounded-full self-center">Flex class</button>
    </div>

    <div class="flex box-border flex-row">
      <a href="#"><img src="https://via.placeholder.com/80"></a>

      <div class="flex flex-column items-center">
        <button class="bg-darkPink hover:underline text-white_disabled font-bold 
                       py-2 px-4 rounded-full">Flex div</button>
      </div>
    </div>
  </div>
</nav>

Answer №2

To maintain the shape of the parent div containing the link and button, apply the tailwind classes grow-0 and shrink-0. Utilize items-center to vertically align the lock icon with the button.

Answer №3

Make sure to maintain the logo's presence using opacity:0 instead of hiding it with display:none

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

TinyMCE - Optimal Approach for Saving Changes: keyup vs onChange vs blur

In the context of my Filemaker file, I am utilizing the TinyMCE editor. My goal is to automatically save any changes made by the user, whether it's typing, applying formatting, inserting an image, or making any other modifications. I have a function ...

javascripthtmltinymcetinymce-5

What is the method for including preset text within a search bar?

My current issue is as follows: When the searchbox is focused, it appears like this: -------------------- -------------------- Upon exiting the searchbox, a string will automatically be added to it: -------------------- Search -------------------- I a ...

javascripthtmlsearchsearchbar

Ways to trigger a modal programmatically in the backend code?

My goal is to trigger the display of a modal when a button is clicked. The modal should be shown by clicking this button: <asp:Button ID="Button4" runat="server" class="btn btn-info" data-toggle="modal" OnClientClick="return false;" data-target="#View1 ...

c#htmlcssasp.net

Tips on altering the h2 color when hovering using h2:hover:after

I'm attempting to alter the color of my h2 element using h2:hover:after. Can someone guide me on how to achieve this? Here is what I have tried so far. h2 { font-size: 25px; } h2:after { content: ""; display: block; width: 14%; padding-to ...

htmlcss

Tips for placing a button on top of a Div element with overflow set to hidden?

My goal is to have a button placed over a box, but I am facing difficulty achieving this. I have experimented with z-index, grid-content, and other methods, but the button refuses to show over the box as desired. The placement of the button inside the box ...

htmlcss

Doesn't IE support the use of jQuery.last()?

Here is the code snippet I am currently using: $('script').last().parent().html('kkkk') Unfortunately, I am encountering an error in Internet Explorer when running this code. Any suggestions on how to address this issue would be great ...

jqueryhtmlinternet-explorer

`The problem of div width error``

I am trying to display two divs side by side with a width of 50% each. Below these two divs, there is another div with a full width of 100%. Check out my code below: <div class="col_1_2"></div> <div class="full-description">description& ...

htmlcss

Django will not be replacing the outdated image

My Django App is designed to display images on the browser based on user selections in the UI. Whenever there is a change in the UI, a JavaScript function is triggered that makes a call to a Django view. Each time I modify the UI in the browser, a new ima ...

javascriptpythondjangohtmldjango-templates

jquery's animation causing elements to move abruptly when containing text

For the past hour, I've been grappling with jQuery and could really use some assistance. The following example showcases smooth animations: when you click on either of the divs, the selected div will move left or right if the viewport is wider than 70 ...

javascriptjqueryhtmlcssjquery-animate

How to achieve divs with see-through text using CSS?

How can I create a CSS (non-HTML5) based website with a filled div that has a cutout revealing an image underneath? There are various overlays and images involved, making the use of static images inconvenient. Additionally, I anticipate needing to scale th ...

csshtmlmasking

Issue with mouse hover not triggering overlay effect between two div elements

I am trying to display articles in a 2x3 matrix with article details like image, title, author, and description wrapped inside a div. I want this entire div to be overlapped by another div of the same dimensions containing a single image. Below is a snipp ...

jqueryhtmlcss

Tips for synchronizing the height of a scrollable list-group column with a neighboring column

Within my Bootstrap 4 layout, I have a column on the left that includes a dynamically generated .list-group, which could potentially contain numerous .list-group-items. On the right side, there is another column showcasing multiple cards inside a .row. Th ...

cssbootstrap-4

Curved Edges Ensure Non-Interactive Elements

element, there is a query about utilizing a color wheel from a repository on GitHub. The goal is to disable any actions when clicking outside of the canvas border radius in this color wheel. Various steps need to be taken to prevent unwanted outcomes: - S ...

javascriptjqueryhtmlcss

What could be causing these "areas" or "panels" to intersect with each other?

As I work on constructing a website, I'm facing an issue with the top two sections. They appear correctly when my screen is full size, but as soon as I adjust the screen size, they jump down and create white space. It seems like I may have approached ...

htmlcss

Adjusting background image positioning for different screen sizes

Can anyone help me figure out how to adjust my CSS so that when my device screen is small, a specific section of the background image is displayed instead of just the center? Here is how my background image is currently set: background-image: url(*.jpg); ...

htmlcssresizebackground-imagedevice

How to adjust the banner image placement in Squarespace

I need the banner image to shift position on smaller screens, specifically those with a max-width of 414px. I want the focus to be on showcasing a specific product (a building) located on the right side of the image. This building should only appear on wid ...

htmlcsssquarespace

Iterate over JSON dates in JavaScript

Trying to utilize JavaScript in looping through a JSON file containing time periods (start date/time and end date/time) to determine if the current date/time falls within any of these periods. The provided code doesn't seem to be working as expected. ...

javascripthtmljson

How can we convert unpredictable-length JSON user input into well-structured HTML code?

Welcome to the world of web development! I am currently embarking on a project where I aim to transform JSON data into HTML structures. Specifically, I am working on creating a dynamic menu for a restaurant that can be easily updated using a JSON file. The ...

javascriptjqueryhtmlarraysjson

Concealing a Specific Element with Text using jQuery

Is there a way to conceal the section that includes the element labeled as "Product Tags" on a webpage? ...

javascriptjqueryhtmlcss

What exactly does this jquery library aim to achieve?

Recently, I discovered a new library for CSS3 animations. As someone who is still learning JavaScript, I am unsure of the benefits it offers. It appears to replicate what jQuery can already achieve but by utilizing CSS3. So, what advantage does using a to ...

jquerycssjquery-animatecss-transitions