After attempting to utilize flexbox for centering items, I am encountering issues with content overlapping and misalignment.
https://i.sstatic.net/48PMj.jpg
.footer_3 {
position: relative;
display: flex;
align-items: top;
justify-content: center;
top: 220px;
padding-bottom:100px;
}
.footer_4 {
position: relative;
display: flex;
align-items: top;
justify-content: center;
top: 190px;
}
Allow me to clarify by sketching a few additional rectangles to illustrate the issue.
https://i.sstatic.net/JtuqK.png
The top-left and top-right sections combined are equal in width to the bottom-left and bottom-right bars, however, they do not maintain the same proportions.
Now, I could delve into how to resolve this dilemma, but it has come to my attention that errors have been consistently popping up throughout your project. It may be more beneficial for you to focus on mastering the fundamentals as opposed to diving straight into flexbox techniques.
In addition, I've crafted a Fiddle showcasing an alternative approach. I've completely revamped it without utilizing flexbox.
What I've executed is establish two columns that each span exactly 50% of the page width. They both align to the left. This ensures that the text on the left and right sides maintains consistent positioning. I've also tidied up the code (such as rectifying your usage of ul and li, eliminating unnecessary classes, recognizing the need to type & instead of plain ampersands (&)... there were several issues). Furthermore, the '01', '02' labels are now automatically generated through CSS.
The overall appearance of the document has evolved significantly. I recommend reviewing it thoroughly and comprehending the function of each line of code. This process will undoubtedly expand your knowledge base.
I trust this explanation proves beneficial.
I've streamlined the code for you. With these modifications, your desired alignments should be achieved:
CSS
.footer_1 {
display: flex;
width: 80%;
margin: 200px auto 50px;
}
.footer_2 {
display: flex;
width: 80%;
margin: 0 auto;
}
.about_section {
width: 100%;
}
I'm struggling to make this website fully responsive and adapt to various screen resolutions. The background images I'm using are high-resolution, but they don't seem to cover the entire page. CSS : @media screen and (max-width: 600px) { ...
I've been working on coding a button that can change the background of my webpage to display a random image. Initially, my code seemed functional, but it was only displaying the last image listed in my series of if/else statements. I suspect that usin ...
I'm currently working on a jQuery function that operates on the mousemove event. The goal is to have two images - one main image and one shadow image, with the shadow image reflecting movement based on mouse position. While everything is functioning p ...
As I develop a front end page that pulls data from multiple sources, my goal is to allow for dynamic addition of new sources without the need for code changes. This includes the ability to add new source URLs on the fly. Additionally, certain data sources ...
Let me share my workaround for creating an overlay and dealing with z-index issues when using Google Maps API. The problem arises when dragging the map and the overlay ends up behind control elements like the zoom bar. No matter how much I adjust the z-ind ...
Currently, I am attempting to reduce the size of the header once scrolling down. My focus is on refining the child theme. Displayed below is a screenshot illustrating the appearance of the header at the top of the page: https://i.stack.imgur.com/wojGf.pn ...
Having trouble with the CSS code I wrote for a background-image. It's not showing up when I set it in my CSS stylesheet. I tested it and found that it only works when written in the body... <body background="Tokyo.png"> ...but not in the styl ...
http://jsfiddle.net/36ykrp9x/5/ HTML <div class="container"> <button>O</button><button>O</button> </div> CSS .container { width: 100%; background-color: rgb(120, 200, 200); text-align: center; } butt ...
I'm a bit confused by the Bootstrap documentation's explanation of scaffolding and mixins. I tried looking up information on scaffolding in CSS, but couldn't find a clear answer. When it comes to mixins, different websites seem to have varyi ...
RenderByTenantFunc({ wp: () => ( <Tooltip id="tooltip-fab" title="Home"> <Button className="home-button"> <a href={ ...
Hey there! So, I've got this cool interactive banner on my website. It features 2 slider sections with some awesome products on the right side. The layout is responsive, meaning that when you switch to a mobile screen size (around 515px or less), the ...
Can this unique border style be achieved using only CSS? https://i.sstatic.net/wMtbG.png ...
I have created a style for image button: .sticky { position: fixed; top: 50px; width: 120%; z-index: 1; } @media screen and (min-device-width : 100px) and (max-width: 600px) { .sticky{ display:none; } } and also implemented a script for it: ...
Currently, I am in the process of developing a unique custom control that consists of a combination of tables and buttons. Alongside this, there is an external CSS stylesheet that defines the styles for these specific elements. This control falls under th ...
Styles for even and odd table rows are set, but hovering over the table rows is not working. Test it out here: http://jsfiddle.net/w7brN/ CSS style : #table_even tr:hover { background-color:#fffbae!important; } /* hover effect */ #table_even tr:nth-ch ...
My jQuery slider is acting strangely. It hides the first image, shows the second one, but then just repeats the cycle by showing the first image again instead of loading the third one. I'm puzzled about what could be causing this issue in my code. Do ...
When using a touch device such as an iPhone, iPad, or Android device, it can be challenging to accurately tap on small buttons with your finger. So far, there is no universal method in CSS media queries to detect touch devices. As a workaround, I check if ...
I am looking to create a div that dynamically adjusts its height based on the user's scrolling behavior. The goal is for the div to expand to the very top as the user scrolls downward, and stop when it reaches 70% of the container/parent element. Is t ...
I have developed a CSS code snippet: .nav{ right: 0px; left: 0px; margin-top: 0px; margin-bottom:20px; height: 35px; text-align: center; background-color: red; z-index: 1; } .sticky { background: #000; text-align: center; ...
Many CSS examples include a scrollbar for editing the CSS code. Click here to see an example of the scrollbar I haven't been able to find any instructions on how to do this. Can someone please explain? ...