The mobile version is experiencing issues with the functionality of the responsive sidebar

Having an issue with the sidebar on this page. In the responsive version, particularly on smartphones, I can't get it to go underneath the content. The sidebar stays connected to the left but doesn't wrap around.

Here is the CodePen link.
If the CodePen link doesn't work, you can visit the website here.

archive-posts-w.with-sidebar .archive-sidebar {
    display: block !important;
    position: relative;
    top: inherit;
    left: 0;
    width: 100%;
    max-width: 350px;
    bottom: inherit;
    right: inherit;
    clear: both;
    float: left;
}

Please note that there may be errors in the HTML as it was copied from a WordPress website source.

cssresponsive-design

Answer №1

It seems there are a couple of issues that need to be addressed:

In your code, the container .archive-posts-w.with-sidebar is set to display: table;. It would be more appropriate to change this to display: block for smaller screens, specifically within your media query.

The CSS styling for the section above your sidebar should be adjusted like so (for smaller screens):

.archive-posts-w.with-sidebar .archive-posts {
    display: block;
    vertical-align: top;
    width: 100%;
}

Additionally, in the rule for 

.archive-posts-w.with-sidebar .archive-sidebar
, there is a max-width setting of 350px which is inherited from other rules. This setting needs to be modified (for smaller screens) as follows:

.archive-posts-w.with-sidebar .archive-sidebar {
    display: block !important;
    position: relative;
    top: inherit;
    left: 0;
    width: 100%;
    max-width: none; /* Updated value here */
    bottom: inherit;
    right: inherit;
    clear: both;
}

Answer №2

Start by adding a td class to the table data, with the class name "test".

td.test
{
 display:block;
}

#sb_instagram .sbi_header_text .sbi_bio, #sb_instagram .sbi_header_text h3
{
      margin:0px!important;
}

#sb_instagram .sbi_header_text .sbi_bio, #sb_instagram .sbi_header_text h3 Within that class, there is 'margin: 0 0 0 60px!important;', change the value from 0px and test on different devices.

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

Understanding the concept of for loops in JavaScript and incorporating them in CSS styling

Hello there! I initially used this code to draw 12 lines, but now I am looking to incorporate a for loop and implement it in CSS. Can someone please guide me on how to proceed? <!DOCTYPE html> <html> <head> <style> #straigh ...

javascripthtmlcss

How can we have a div stay at the top of the screen when scrolling down, but return to its original position when scrolling back up?

By utilizing this code, a div with position: absolute (top: 46px) on a page will become fixed to the top of the page (top: 0px) once the user scrolls to a certain point (the distance from the div to the top of the page). $(window).scroll(function (e) { ...

javascriptcss

Having trouble with the JSFiddle dropdown button that is unresponsive to

I am currently in the process of developing a test drop-down menu. The open menu button functions correctly, however, the close button is unresponsive to clicking or hovering actions. Upon clicking the open menu button, it should make the other button visi ...

javascripthtmlcss

HTML: The art of aligning elements within a header

I've been working on creating my personal HTML record, but I'm facing one last challenge that I can't seem to overcome. I want to design my header like this: https://i.stack.imgur.com/FU8EJ.png With the following elements: TEXT SUMMARY wi ...

htmlcssweb

How can JQuery determine the current CSS background image of a three-state icon or button?

I am facing a challenge with using three images to represent different states of an application icon, and I am trying to achieve this using CSS. There are no issues with the original or hover states: #myDIV { background-image: url(icons/homeBlack.png); } ...

jquerycssbackground-image

Looking to create a centered 'ul' using Bootstrap

I am looking to center the list with a specific width. body { background-color: rgb(26, 40, 114); } h1 { color: white; text-shadow: 7px 7px 10px black; } li { list-style: none; border-radius: 5px; border: 2px solid white; background-colo ...

htmlcsswebbootstrap-4

What is the best way to create a responsive Material UI Modal?

I have set up a Modal with a Carousel inside, but I am struggling to make it responsive. Despite trying various CSS solutions from StackOverflow, nothing seems to be working for me. How can I resolve this issue? CSS: media: { width: "auto&quo ...

cssreactjsmaterial-uiresponsive

Altering the background color of an individual mat-card component in an Angular application

Here is the representation of my mat-card list in my Angular application: <div [ngClass]="verticalResultsBarStyle"> <div class="innerDiv"> <mat-card [ngClass]="barStyle" *ngFor="let card of obs | async | paginate: { id: 'paginato ...

cssangulartypescriptfrontend

What is the best way to align the bottom of an element with the browser buttons panel on mobile devices?

When viewing the website on a mobile device, I noticed that the floating button is hidden behind the browser buttons panel. Is there a way to adjust the positioning of the element relative to the browser's buttons panel? I attempted using env(safe-ar ...

htmlcssmobile

Unable to activate dropdown menu in html and css

Hi there, I'm facing an issue with hiding the dropdown-menu submenu. I tried using display: block !important;, but it didn't work. Even when I used display: none !important;, the dropdown menu still wouldn't disappear. I want the dropdown s ...

htmlcsstwitter-bootstrap-3visual-studio-2022

Canvas Frustratingly Covers Headline

Several months ago, I successfully created my portfolio. However, upon revisiting the code after six months, I encountered issues with its functionality. Previously, text would display above a canvas using scrollmagic.js, and while the inspector shows that ...

javascripthtmlcssscrollmagic

Phase 2 "Loading" visual backdrop

I'm attempting to include a loading animation GIF in my Cycle 2 plugin. Is there a way to ensure that the GIF loads before the images? Right now, I have set my loading.gif as a background image. The issue is that the loading.gif isn't displaying ...

javascripthtmlcssjquery-cycle2

Activate a CSS button upon clicking and update the content within the div

In order to achieve the desired result of having menu CSS buttons change the content of a div when clicked, I have managed to do that successfully. However, a problem arises when clicking on the 2nd or 3rd button/link - it changes the div content, but as s ...

htmlcss

Browser Fails to Recognize AJAX Links as Visited

It appears that the styles for a:visited do not apply to links that are loaded via JavaScript. When a user clicks on a standard link, it shows as visited right away and even after refreshing the page. I'm uncertain if this issue is specific to jQuery ...

jquerycssajaxjquery-mobilebrowser-history

The appearance of HTML varies depending on the type of mobile device being used

My email template is having display variations on different mobile devices, with the textbox sometimes centered instead of left aligned as intended. Any suggestions on what might be causing this issue and how to resolve it? Desired Display on All Devices ...

javascripthtmlcssresponsive-design

The height of the Material UI Paper component is not appropriately matched with the parent component

I am currently working with the Paper component that contains a Card component, and I am trying to make its height fill the entire screen. To simplify the problem, I have provided the following code: import React from "react"; import { makeStyles ...

javascriptcssreactjsmaterial-ui

What is the reason behind getElementsByClassName not functioning while getElementById is working perfectly?

The initial code snippet is not functioning correctly DN.onkeyup = DN.onkeypress = function(){ var div = document.getElementById("DN").value document.document.getElementsByClassName("options-parameters-input").style.fontSize = div; } #one{ heigh ...

javascriptjqueryhtmlcss

Utilize UI Kit to incorporate fluid margins dynamically

How can I dynamically add internal margins between cards in a responsive layout? The following code ensures responsiveness: Large Screens display 4 Cards. Medium Screens display 3 Cards. Small Screens display 2 Cards. Micro Screens display 1 Card. &l ...

htmlcssflexboxgetuikit

The process for incorporating two distinct Google fonts into a Next.js project using Material UI

Currently in the process of upgrading my MUI5 application from Next 12 to Next 13 and experimenting with integrating next/font. In my previous Next 12 version, I utilized two Google fonts - 'Rubik' and 'Ephesis' which were included in t ...

cssnext.jsmaterial-uifonts

What are some tips for designing HTML email templates?

Check out this example of an HTML email <div style="width:650px;"> <div class="begining"> <p> Dear <span>' . $name . '</span><br/>Thank you for your booking </p> & ...

htmlcsshtml-email