Customizing Wordpress Themes with CSS

Struggling with customizing my WordPress theme, I need to rearrange the elements in the footer section of my website . Currently, the contacts are displayed above the Facebook widget, but I want them below it. I've attempted adjusting the position and margin top attributes in the #footer .fr element without success.

Both the contacts and Facebook widget elements are within the footer:

#footer {
clear: both;
position: relative;
background: transparent url(...) no-repeat center 0;
color: #888;
margin-top: 90px;

The contacts are part of the following element with the corresponding CSS:

#footer .fr {
width: 220px;
position: relative;
font-size: 12px;
margin-top: 10px;

And the Facebook widget is contained within this element:

#footer .column {
float: left;
width: 210px;
margin: 0 0 5px 20px;
}

Any suggestions on how I can adjust the positioning of these elements?

Answer №1

shift

<div class="fr">
    <a title="" href="http://www.arqui9.com"><img id="logosmall" src="http://www.arqui9.com/wp-content/uploads/2011/11/LogoSMALLER.png" alt=""></a>
     <p>Copyright © 2012 Arqui9 - Visual+3D,<br>
        All Rights Reserved - <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="83f3e5e6f1ede2ede7e6f0c3e2f1f2f6eabaade0ecee">[email protected]</a></p>
</div>

to move below the previous "section" div.

check out http://jsfiddle.net/qQaxM/

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

When the overflow-y property is set to hidden, the page unexpectedly scrolls to the top in Firefox

I have a javascript code that is responsible for opening modal popups on my website. It also manipulates the overflow-y property of the <html> element by setting it to hidden. Interestingly, in Chrome and IE, this functionality works as intended. The ...

Is it acceptable to employ numerous classes simultaneously?

Instead of applying individual styling attributes like background-color and border to each element, I chose to create a set of classes such as red-background, blue-text, and border-1px... Do you think this approach is acceptable or should I try something d ...

The Presentation of Information and Title for Advanced Custom Fields (ACF) Dropdowns

Having an issue with displaying both the value and label for Advanced Custom Fields (ACF) according to their documentation found at: At the moment, only the label is showing up. Within the ACF plugin tool, it instructs: Enter each choice on a new line. ...

Unable to update `margin: 0;` on child divs

Can anyone help me remove the margins of the child divs so that the squares defined at #overview > div are aligned next to each other? #overview { display: inline-block; margin: 0em; padding: 0em; background: green; } #overview > div { ...

Troubleshoot: Dropdown menu in Materialize not functioning (menu fails to drop down

I am currently incorporating Materialize to create a dropdown button in my navigation bar. However, I am facing an issue where nothing happens when the button is clicked. Here is a snippet of my code: <head> <meta charset="UTF-8"> <!-- ...

Customized height for vertical Slick slider based on content length

I am facing an issue with my vertical slick slider: $('.slider').slick({ slidesToShow: 3, slidesToScroll: 1, arrows: false, dots: false, infinite: false, centerMode: true, vertical: true, focusOnSelect: true }); .slider { bac ...

Embracing the Power of Sass

I have recently revamped my portfolio website on Github Pages and now I am looking to integrate Sass for my upcoming Portfolio 2.0 project. Although I have worked with Sass before, setting it up from scratch is new to me. Currently, I have installed Sass ...

Enhance the header image by incorporating background "bars" that add color to the overall design. Alternatively, overlay an image on top of div

I designed a header image for my website, but I'm struggling to make it extend the full width of the user's web browser with black "bars" on the sides. I've attempted a few solutions, but haven't been successful so far. Currently, my c ...

Changing the height of a pseudo element according to the width of the viewport in a dynamic way

Currently, I am utilizing the :before pseudo-element on a 100% width div to create a curved top, which is functioning correctly. However, I am facing the issue of adjusting the height of the :before element through media queries whenever the browser width ...

Can someone please help me understand why my CSS transform scale isn't functioning properly?

I've developed a JavaScript function that enlarges a button and then smoothly shrinks it back to its original size. The function successfully changes the color of the button to blue, but for some reason, it's not working with the transform prope ...

When using the background-blend-mode property, transition-duration is not taken into account

Try hovering over the top left h1 element in this code example You'll notice that it smoothly changes the h1 element to a shade of blue in just 2 seconds. However, the transition doesn't affect the blend mode of the backgrounds. Even though the ...

When I scroll, changing the position from fixed to absolute causes my image to jump

My goal is to implement a unique visual effect where a background image, initially positioned as "fixed", gradually moves towards the top of the webpage and then disappears as if it were absolutely positioned. However, this movement should only occur after ...

An unusual icon with three varying sizes in a single file

I have come across an interesting favicon file. Click here to download the favicon file Unfortunately, I am unable to upload this image file as it does not meet the required format standards. Upon viewing the file in Windows 7, a fascinating discovery w ...

Responsive timeline displaying issue on the left column

After tackling some challenges in previous forums to fix my responsive timeline, I resorted to copying code from codepen.io due to my laziness to create one from scratch. The complexity of creating a timeline also played a role in my decision. My current ...

What is the best way to extract the first heading tags from a post and showcase the outcome?

Can someone help me with changing the_title() function to a heading tag that I manually input in posts? I have created a post loop list using table code but I am stuck at this point... Desired Title Format: <h3 style="text-align: center;">Title Here ...

Changes in vertical position of link icon within div based on the browser and operating system

Trying to design a straightforward 3-line mobile menu dropdown, but encountering inconsistency in appearance across different devices. The vertical positioning of the icon is varying based on the operating system and browser version: Linux -desktop Fire ...

CSS rule for targeting an element that does not have any child elements

I have a variety of different elements that are structured similarly to the following.. <div id="hi"> <div class="head"> </div> <div class="footer"> </div> </div> ..however, some of these elements do no ...

The menu bar button refuses to reveal its hidden options

Having some trouble with my dropdown button as a junior web developer. Resizing the screen causes the dropdown to not function correctly. Any help would be appreciated! <nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top"> ...

CSS image replacement; won't render properly

I'm currently working on implementing a hover image swap effect for my website gallery. The CSS code I have so far is below. While the original images in my HTML file are displaying correctly, the hover functionality is not working as expected. CSS: ...

`CSS border issues`

I am currently attempting to create a square consisting of 4 smaller squares inside, but I have been facing challenges with the method I was using. Here is the code snippet: #grandbox { position: absolute; width: 204px; height: 204px; border: so ...