Utilizing the CSS properties of table-cell and float in a display

I've designed a header section, but I'm facing an issue.

It looks good on devices with resolutions greater than 1020:

https://i.sstatic.net/VlgmR.png https://i.sstatic.net/x3V15.png

The problem arises on smaller resolutions: https://i.sstatic.net/zDJaZ.png https://i.sstatic.net/YYohp.png

In the second section, I want the title to appear above the list.

I attempted to switch the order of .title and .subcategories, but it caused alignment issues for larger resolutions where .title needs to be aligned to the right.

I am using display: table-cell because I need to vertically align the content and automatically set the width for .title.

Here's my code:

(CSS code block here)

htmlcsscss-floatdisplay

Answer №1

I have repositioned the Edukacija title above the menu similar to how it is displayed in the first Sport option. On screens wider than 1200px, I made adjustments to the CSS for this layout change.

.category.right .category-header .title {
      padding: 70px 0 70px 100px; /* to center vertically */
      text-align: right;
      float: right; /* align to the right side */
    }

Check out this JSFiddle link to see the changes. Feel free to resize the fiddle window to view the results.

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

Having trouble getting event modifiers to work in Vue when added programmatically

Trying to dynamically add events using v-on through passing an object with event names as keys and handlers as values. It appears that this method does not support or recognize event modifiers such as: v-on=“{‘keydown.enter.prevent’: handler}” T ...

javascripthtmlvue.jseventsevent-handling

What is the recommended approach for linking CSS files when utilizing ASP.NET URL routing?

Within my URL routing setup, I have a master page content template that references a stylesheet on the destination page: <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server"> <link href="css/actionmenu.css" rel="stylesheet" t ...

asp.netcssurl-routing

What is the best way to display a placeholder instead of the state's value when a page loads?

I'm having trouble displaying the placeholder of an input instead of its state value. When the page loads, it shows an empty select box because the testType state is null initially. How can I make sure that only the placeholder is shown instead of the ...

javascripthtmlreactjsreact-hooksuse-state

Ways to retrieve a variable from a separate TypeScript document

A scenario arises where a TypeScript script contains a variable called enlightenFilters$: import { Component, Input, OnInit } from "@angular/core"; import { ConfigType, LisaConfig } from "app/enrichment/models/lisa/configuration.model"; ...

javascripthtmlangulartypescript

Delete the browsing cache in Internet Explorer from an external source

Currently, I am working on developing an ASP.NET application using Visual Studio. However, a persistent issue I am facing is that every time I launch the application, Internet Explorer caches certain CSS and JS files. This forces me to manually clear the c ...

javascriptcssvisual-studio-2010internet-explorer

Netlify Alert: Build process ended with an error code: 254

Appreciate your assistance. I have a basic HTML file that I intended to host through Netlify. In my Git repository, I have three files - index.html, style.css, and a readme file. The structure of the HTML file is as follows: <!DOCTYPE html> < ...

htmlgithubnpmpackage.jsonnetlify

Display the X button solely once text has been inputted into the textbox

I have integrated a text clearing plugin from here in my project to allow users to clear the input field by clicking on an X button. However, I want to modify the code so that the X button only appears when there is text entered in the textbox. I attempt ...

javascriptjquerycss

How can I identify a click on a webpage that excludes a specific zone?

I'm working on a website where users can select items from a list by clicking on them using the onClick attribute. However, I'm facing an issue where I want to allow users to deselect the item by clicking anywhere else on the page. After trying o ...

javascripthtmlonclick

Is there a way to customize the color of a MUI styled component?

I have a customized MUI component that displays a circular badge in green. const StyledGreenBadge = styled(Badge)(({ theme }) => ({ '& .MuiBadge-badge': { backgroundColor: '#44b700', color: '#44b700', ...

javascriptcssreactjsmaterial-uistyled-components

When adjusting styles using Chrome DevTools with Webpack HMR, the page layout can become distorted

Encountering a peculiar issue: Currently utilizing Webpack in conjunction with Vue-CLI and HMR. On attempting to modify styles via DevTools in the browser, the page itself undergoes unexpected changes - some styles are removed (screenshots provided below) ...

csswebpackvue.jsgoogle-chrome-devtoolswebpack-hmr

Design an interactive listbox with both HTML and Angular that allows for multiple selections

I am trying to implement a multi select listbox with keyboard navigation capability. Currently, this is the HTML layout I have: <div> <div *ngFor="let tag of tags; let index=index" [class.selectedRow]="rowIsSelected(tag.id) ...

htmlangular

When the user presses either the refresh button or the back button, they will be redirected

After the user presses refresh or uses the browser back button, I need to redirect them to a specific page in order to restart the application. My JavaScript code is as follows: var workIsDone = false; window.onbeforeunload = confirmBrowseAway; function ...

javascriptpythonhtmldjango-nonrel

maintaining the alignment of one div's right boundary with another div's right boundary

---------------------- ----------------------------->edge X | | | | | logo | | dropdown menu ...

javascripthtmlcss

Having trouble with loading the generated HTML from a PHP file? If loadHTMLFile is not working, here's what you

Currently, I am facing an issue in obtaining the generated HTML from my index.php page. My goal is to convert an HTML table that was created using PHP into a CSV file. The main challenge I am encountering lies in capturing my HTML table within a PHP varia ...

phphtmldom

How can I preloaded self-hosted fonts in Next.js without receiving a console warning for not using the resource within a few seconds?

I am working on a project in Next.js and I want to preload my self-hosted fonts. In my code, I have the following setup: Inside my _app.js file: <Head> <link rel="preload" href="/fonts/leira/Leira-Lite.t ...

htmlcssfontsnext.jspreload

Is there a way to create a layout with a row containing two columns and another row with just one column using MUI Grid?

Is it possible to achieve the design displayed in the image using MUI components? I am facing an issue where I am unable to properly insert a third Button into the MUI grid with the same width as the other two buttons. Any suggestions on how to solve this ...

cssreactjsmaterial-ui

Traversing through Object consisting of dual arrays within VueJS

Currently, I am working on a chat application built in VueJS and encountering an issue when attempting to display messages along with their respective timestamps. The challenge arises from the need to iterate through an object that contains two arrays: one ...

javascripthtmlarraysvue.js

Using CSS on a randomly selected div that is chosen after dividing the main div each time it is clicked

Imagine a square box displayed as a "div" element. When you click on it, it splits into an n x n grid with each square having a random background color. However, the issue I am encountering is that I want to apply additional CSS to each of these randomly c ...

javascriptjqueryhtmlcss

Alert: The comment index is not defined on line 5 of the comment.php file located in C:xampphtdocsindex

There is a piece of code I am struggling with: <?php if($_POST){ $name = $_POST['name']; $content = $_POST['comment']; $handle = fopen("comments.html","a"); fwrite($handle,"<b>" . $name . "</b><br ...

phphtmlcomments

Ensure that all lists are aligned on the left side, from the numbers to

Trying to implement a solution for aligning numbers and text in an ordered list within a border. Found a helpful answer on Stack Overflow: Left align both list numbers and text Encountering an issue where long content in one list item overlaps into the n ...

htmlcss