Is it just me, or does floating right not seem to work on 404 pages?

I have been working on setting up a unique header and footer design for a client's website. You can check it out here:

Everything is looking good with the social media links floating to the right on all pages, except for some reason on the 404 error pages, they don't align properly. I'm stumped as to why this change occurs only on the error pages.

Here's an example of a 404 page:

Below are images for clarification:

https://i.sstatic.net/Jspxx.pngenter image description herehttps://i.sstatic.net/ApHxP.pnghttps://i.sstatic.net/e4nuq.png

css

Answer №1

.et_pb_column.et_pb_column_1_2.et_pb_column_1 {
 float: right;
}

Answer №2

When viewing the standard page, you will find the CSS code below:

@media (min-width: 981px)
.et_pb_gutters3 .et_pb_column_1_2, .et_pb_gutters3.et_pb_row .et_pb_column_1_2 {
    width: 47.25%;
}

This code is applied to .et_pb_gutters3 (which includes the LinkedIn icon section)

Additionally, there is another CSS snippet as follows:

@media (min-width: 981px)
.et_pb_gutters3 .et_pb_column, .et_pb_gutters3.et_pb_row .et_pb_column {
    margin-right: 5.5%;
}

This piece of code affects .et_pb_column (the area where the logo can be found)

It is recommended to incorporate this code into the 404 error pages too.

UPDATE:

Despite its application, it appears that this doesn't entirely resolve the issue. To rectify this, simply add float:right; to the .et_pb_column_1 portion (which includes the LinkedIn icon)

Answer №3

Resolution for Header:

To resolve the issue, modify 

<div class="et_pb_column et_pb_column_1_2 et_pb_column_1">
to 
<div class="et_pb_column et_pb_column_1_2 et_pb_column_1" style="float:right">
at Line 202.

Error in Footer:

The classes used are inconsistent between the 404 page and normal pages - et_pb_column_1_3 and et_pb_column_2_3 are used in the former while et_pb_column_1_2 is used in the latter.

Resolution for Footer:

To rectify this discrepancy, replace occurrences of et_pb_column_1_3 and et_pb_column_2_3 with et_pb_column_1_2 in the footer at Line 366 and 384.

Answer №4

The issue you are experiencing is due to the @media rule.

If you examine 

<div class="et_pb_column et_pb_column_1_2  et_pb_column_1">
, you will see that the following media rule has been applied:

@media (min-width: 981px)
.et_pb_gutters3 .et_pb_column_1_2, .et_pb_gutters3.et_pb_row .et_pb_column_1_2 {
    width: 47.25%;
}

However, this rule is not being implemented on the 404 page.

Solution: Ensure that the @media rule is also applied on the 404 page.

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

Do flexible layouts require more effort and time to create and upkeep compared to fixed width layouts?

Are flexible layouts more challenging to create and maintain than fixed width layouts, and do they take longer to design? Does a flexible layout only involve setting the width, height, and font size in em or %? What are the main advantages of using a fle ...

cssxhtmlusabilityaccessibility

Creating a CSS layout that eliminates the need for a vertical scroll bar

Currently, I am experimenting with creating an HTML CSS Layout using the div tag. You can view the code here Currently, the layout displays a vertical bar that I would like to eliminate. Ideally, I only want it to display if the content is lengthy. ...

css

Getting the next sibling element with Selenium: A complete guide

Having trouble targeting a textbox after the label "First Name" in a list to enter a first name. Here's what I've tried: WebElement firstNameLocTry = driver.findElement(By.xpath("//label[text()='First Name']/following-sibling::d ...

javahtmlcssseleniumautomation

Troubleshooting problem with responsive image display and blurred effects

Initial problem I have a photo gallery on my website. When you click on a photo, you can view a larger preview. To cater to mobile users, I set the following CSS: .overview img { height: auto; width: 90%; } However, I am facing an issue where the hei ...

htmlcss

Tips on effortlessly updating the URL of your website

Despite seeing the question asked multiple times, I still find myself struggling to understand how to modify a URL or create a new HTML page that seamlessly integrates into a website without redirecting users. I am curious about achieving the functionalit ...

javascripthtmlcssangularjs

Change the right border style for the second and third ToggleButtons in the ToggleButtonGroup

I've been working on this for a few hours now and I can't seem to get it right. Currently, I'm using Mui v5 and trying to style the ToggleButtons to look like regular MUI buttons. So far, I was able to achieve this transformation: https:/ ...

javascriptcssreactjsnext.jsmaterial-ui

What is the best way to define a margin according to the size of the device being used

I am working on an angular/bootstrap web app and need to set a left margin of 40px on md, xl, lg devices and 0px on sm device. I attempted to create a spacer in styles.scss like this: $spacer: 1rem; .ml-6{ margin-left:($spacer*2.5); } Then in my HTML, ...

cssangularbootstrap-4

Error in WordPress: The table prefix cannot be blank

While setting up WordPress, I encountered an issue during the database details input in the first step of the installation process. I am using XAMPP and have tables in my database named wordpress_tbl_table1 and wordpress_tbl_table2. I entered "wordpress_tb ...

htmlcsswordpressxampp

CSS Hover Effects on Navigation Bar Not Displaying as Expected

I was aiming to make one of my Navbar tabs stand out by having a different appearance compared to the others. However, there seems to be an issue with the text color for this particular tab in the hover state - it works inconsistently across different brow ...

htmlcsstwitter-bootstrap

Problem with Jquery Sticky Navigation

I've been struggling to understand this issue and can't seem to find any help. http://fiddle.jshell.net/DQgkE/7/show/ The user experience is currently a bit glitchy, but what I would like is: 1) When scrolling down the page, I want the Sticky ...

javascriptjquerycssajaxjquery-plugins

Picture that perfectly matches the height of the window

I am looking to create a website design similar to this where an image fills the window until you scroll down. I am not sure how to accomplish this. Would using jQuery be the best option? I haven't been able to find much information on this. While my ...

javascriptjqueryhtmlcss

Aligning the text in the middle of a button

Currently delving into Front-End development and in the process of coding my maiden site using bootstrap. Encountered a roadblock on something seemingly simple. How can I center text within a button? Here's the button, the default one utilizing an " ...

htmlcsstwitter-bootstrap

What is the best way to position an image behind textboxes?

Need help with moving an image behind textboxes and a sign-in button? Check out my issue: https://i.stack.imgur.com/cGoEU.png The image is currently covering the login form. How can I position it properly? Here's the code snippet causing the issue: ...

htmlcssimagebuttontextbox

A guide to spinning an image in every direction with CSS

I'm working on rotating an image in all directions using CSS and Vue.js. To demonstrate this, I have created a CodePen with the necessary code below. <div id="app"> <v-app id="inspire"> <div class="text-xs-center image-rotation" ...

htmlcssvue.jssass

Is there a way to decrease the speed of a range slider?

Recently, I created a range slider using HTML, CSS, and JS to complement my Lua Nui. It's been working smoothly for the most part, but I've noticed an issue when sliding too quickly on the slider. As I slide it to the left, certain values fluctua ...

javascripthtmlcssluaslider

Is there a way to align the line under the hyperlinks to match the text size using CSS?

<div className={styles.container}> <ul className={styles.links}> <li className={styles.link}> <a href="/">Home</a> </li> <li className={styles.link}> <a href="/portfolio& ...

htmlcssnext.js

jQuery SlideDown Navigation

Is there a way to implement jQuery code that will display dropdown menu options when the Trials link is clicked? Update: jQuery(document).ready(function () { $("a[href='http://sheep.local/cms/trials']").click(function(e){ e.prevent ...

jqueryhtmlcss

Prevent scrollbar from appearing while splash page loads

Looking for help with a script to create a splash/intro page loader. $(function(){ setTimeout(function() { $('#splash').fadeOut(500); }, 6000); }); The current script hides the intro page after 6 seconds, ...

javascriptjqueryhtmlcss

I am attempting to properly arrange my navigation links and logo in alignment

I need help aligning the logo in the exact center while keeping the navigation links as they are. Here is how it currently looks: https://i.stack.imgur.com/qOgVJ.jpg My CSS: .logo { display: inline-block; text-align: center; } na ...

htmlcss

What is the best way to combine two menu plugins in Wordpress?

Currently, I am in the process of creating a logo with a drop down menu for my website, which can be found at . After discovering a widget called Menu Image that successfully transformed a menu item into a photo, I decided to add another widget called Ma ...

csswordpressplugins