Making <div> elements responsive by rearranging their display order using CSS in media queries, troubleshooting issues with floats, and adjusting font sizes

I'm currently working on a webpage located at:

On this page, there is a containing division with 5 elements inside. They are floated left in order to align vertically, but I am facing some challenges when it comes to adjusting my CSS for media queries (one for 768 resolution and one for 480 resolution).

The main order of the elements is logo, hex1, middle, hex2, hex3.

Troubles with Floating Elements

For 768 resolution, I would like to have the logo and hex1 centered, followed by the middle below (centered), and finally hex2 and hex3 also centered. However, removing the float from the middle element causes everything to get messed up. So, I tried removing the floats altogether, but that pushes the middle div too far down. Any suggestions on how to tackle this issue would be greatly appreciated!

Order of Display

For 480 resolution and lower, I'm interested in changing the order of the divisions so that the logo appears first, then the 'middle' section, followed by the hex links. I'm unsure about how to change the order using CSS. I came across a similar discussion online, but it was focused on a provided grid system which doesn't apply in my case since I created the layout myself.

Responsive Font Size

Is there a way to make font sizes for headers responsive based on the width of the page? While this isn't a top priority, it would be useful to know!

Thank you very much.

csscss-floatfont-sizefluid-layout

Answer №1

To ensure proper float alignment, consider setting your .links1 and .links2 divs to 100% width and applying a CSS clearfix. This should resolve any formatting issues with the .preorder div. To center the hexagons, you can experiment with adding a text-align:center rule to the .links1 and .links2 divs.

You may find Chris Coyner's article on clearfix helpful: http://css-tricks.com/snippets/css/clear-fix/

If you're looking to dynamically adjust font size as the window size changes, consider trying fitText: . While it may require some fine-tuning, it could achieve the desired effect.

Additionally, don't forget to potentially add a clearfix to your .container div for optimal layout stability.

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

Issue with background image not resizing or repeating correctly on mobile devices

My website header is not scaling properly on mobile devices, causing some issues. The background color with white text using Bootstrap and custom CSS is not extending across the screen on smartphones or when viewed in Chrome Dev Tools. As a result, two ma ...

htmlcsstwitter-bootstrap

Formatting Issue with HTML Form (Width Exceeding Specifications)

Currently, I am in the process of creating a table that contains various forms and buttons within the cells. However, there seems to be excess space between the buttons which is giving the appearance of the form being too wide. I have been attempting to di ...

htmlcss

Trouble with Flex 3 styles not fully applying to dynamically generated tabs within a TabNavigator

When using ActionScript to dynamically create a tab, I noticed that the style is applied to the skins but not to the text of the newly created tab until I click on another tab and then go back to it. ActionScript private function clickAddTabHandler(event ...

cssapache-flexactionscript-3

Position the colored div on the left side of the page

Here is the CSS I am currently using... <style type="text/css"> .widediv{width:1366px;margin-left:auto;margin-right:auto} </style> This CSS code helps me create my webpage : <body><div class="widedivv"> <!-- Content go ...

javascripthtmlcss

Floating elements and Internet Explorer compatibility

In my code, I have two divs that are floating correctly in Chrome, Firefox, and Safari but not in Internet Explorer. In IE, the right div appears below the left div even though it should be floated to the right. Both of these divs are wrapped by an outer ...

htmlcss

Partially filling circles for a personalized coin-slider experience

Looking to create a unique coin-slider that changes the filled factor of a coin as it moves through a specific range of images. For example, when scrolling through 10 images, the filled part of the coin would transition from 0 to 1 depending on which image ...

csshtmlcanvas

Placing a div above the navigation bar in jQuery Mobile to create multiple stacked footers

I am currently facing an issue with my website where I have a static nav bar at the bottom of each page, but I need to add another content div above it. When I try to position it as a footer, it ends up in the same spot as the nav bar. Absolute positioning ...

jquerycssmobile

What is the best way to retrieve the unique identifier of dynamically created divs and showcase a message based on that identifier?

Is it possible to retrieve the id of a dynamically generated div and show a unique message when each div is clicked in the code snippet found at this link? function get_random_color() { var letters = '0123456789ABCDEF'.split(''); ...

jqueryhtmlcss

Adjust the path-clip to properly fill the SVG

Is there a way to adjust the clip-path registration so that the line fills correctly along its path instead of top to bottom? Refer to the screenshots for an example. You can view the entire SVG and see how the animation works on codepen, where it is contr ...

javascripthtmlcssanimationsvg

Instructions for utilizing float:left and list-style-type within HTML are as follows: I am currently experiencing issues with implementing the float:left and list-style-type properties in my code

I'm attempting to align a button list to the left using the float: left property and also remove list styles, but for some reason it's not working as expected. //CSS #tus{margin:5px;padding:0;width:640px;height:auto;} #tus ul{margin:0px;padding: ...

javascripthtmlcss

creating a form layout with inline buttons

I have encountered an issue with aligning 2 buttons and a form with input type in a single line. Even though I have tried different approaches, I am unable to achieve the desired inline layout. Here is my current setup: .btn-registerLayout { backgr ...

htmlcsstwitter-bootstrapbootstrap-4

The loading of the Bootstrap tagsinput has encountered an error

I am facing an issue with my Django application where tags are not loading properly in an input field using jquery. It seems like the application is unable to locate the bootstrap-tagsinput.css and bootstrap-tagsinput.js files. Can anyone provide guidance ...

javascriptjquerycssdjangotwitter-bootstrap

Ionic 4 Tabs with Smooth Scrolling

I recently started using Ionic 4 and I'm trying to create scrollable tabs in Ionic 4. However, when I include multiple tabs as shown in the code below, they become compressed and appear within the same viewing space. <ion-tab-bar slot="top"> ...

cssangularionic-frameworkionic4

Tips for adjusting the width of the box-shadow in CSS

I am facing a challenge with my button that has a box-shadow effect on hover. Currently, I am unsure how to adjust the width of the box-shadow effect. Here is a snapshot of my button's current appearance: https://i.stack.imgur.com/Mg0df.png</p&g ...

cssbox-shadow

Choose different components that possess the X designation

Can X number of elements (h1, p, span...) be modified only if they have a specific class? I'm searching for a solution like this: (elem1, elem2, elem3, elem4).class { /* add customization here */ } I previously attempted using parentheses, curly b ...

csscss-selectors

Unexpected resizing of DIV element in Chrome

Working on my new PHP website, I encountered a strange issue recently. I have a file for the top navbar that is included on every page and it was functioning perfectly fine. However, while creating a register form, I noticed something odd happening. When r ...

phphtmlcssgoogle-chromeweb

Building a bespoke pagination feature with react-table

Looking to personalize the pagination with links for "Previous," page numbers, and "Next" like this example: https://i.sstatic.net/C4vsw.png I'm currently using react-table version 7 but have been unable to replicate the desired pagination style. I ...

htmlcssreactjs

Centering an image on a webpage using CSS

Here is the code I am using for displaying my image: return <div class="imgContainer"><img src={broomAndText} alt="broomAndText" /></div> In my css file, I have included the following styling: .imgContainer { tex ...

htmlcssreactjs

The CSS code ".btn btn-primary * { visibility: hidden; } is failing to work as intended

Trying to hide specific buttons for print using CSS, but it doesn't seem to be working. Here is the code snippet: .btn btn-primary * { visibility: hidden; } <div id="control" style="display: none"> <button class="bt ...

htmlcss

Try using Bootstrap 4 Carousel columns instead of the traditional carousel-item

Is it possible to use Bootstrap to display grid columns or rows within a Carousel instead of carousel-items? The concept involves having intricate grid column structures that rotate like carousel-items. For instance, if we have the following grid: <div ...

csstwitter-bootstrapbootstrap-4