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

Input field that adjusts its width based on screen size, accompanied by two buttons displayed side

I need a solution to display a text input and two buttons side by side. The buttons should take up only the space they require, while the text input should expand to fill the remaining space. It's important to have small margins between these elements ...

cssbootstrap-4

Expanding the outer div horizontally by using inner divs with scroll

Is there a way to ensure that all child divs are displayed on the same line within the outer div without wrapping to a second line? The width of the outer div should be fixed so that a scrollbar is visible, allowing us to scroll and view all inner divs. h ...

css

What is the reason border-box does not function properly on inline-block elements?

Demo: http://jsfiddle.net/L5jchnpm/ I've encountered an issue where I believed that using display: inline-block would make elements act as both inline and block elements. Additionally, I thought that setting box-sizing: border-box would adjust the w ...

htmlcss

Is there a way to incorporate an animated element within the track of my circular progress bar?

My circular progress bar features two paths, with one path increasing in length as data is received, eventually turning the entire circle red. Here is the SVG HTML code: <path d="M 50,50 m 0,-47 a 47,47 0 1 1 0,94 a 47,47 0 1 1 0,-94" stroke="#A9B0B7" ...

javascriptjqueryhtmlcsssvg

Is it possible to modify the font color of a specific MenuItem in material-ui?

I've scoured every corner of the internet, but I'm still stumped by this question: How can I tweak the text color (not the background) for a selected or hovered MenuItem? I know the solution lies within useStyles, but my attempts thus far have be ...

javascriptcssreactjsmaterial-ui

Ensuring one div remains in a fixed position relative to another div

I'm struggling to keep my two white divs aligned in relation to the black div in the center. They need to maintain the same distance from the black div even when the page is resized. #halvfjerds { width: 100%; height: 1050px; background-color ...

htmlcss

Modifying the color of a div element solely through CSS styling

I am currently working with a set of buttons, available at this link. While browsing through this helpful post, I encountered an issue. Whenever I click on another element, the orange color of my button disappears. How can I maintain the orange color on t ...

htmlcssangular

Ensure that the CSS element pseudo-class does not override the styling of its child

Looking to style an anchor element that contains other HTML elements. Here is the basic code structure: HTML: <div class="container" id="sub-menu"> <div class="row" data-bind="foreach: subMenu"> ...

htmlcsscss-selectors

Display Bootstrap modal upon page load automatically

Is there a way to automatically trigger the Bootstrap model upon page load? I attempted implementing the following code in my index file: <script type="text/javascript> $(window).load(function () { $('#myModal').modal('sh ...

htmlcsstwitter-bootstrap

What is the best way to ensure that the background of my sticky table th stays in place and does not scroll away

I have a dynamic table where the table body rows are loaded dynamically. The wrapper uses Bootstrap5's overflow-scroll feature to keep the table at a fixed height and scroll if there are too many rows. I managed to make the table head sticky, but had ...

htmlcssbootstrap-5

Tips for modifying the appearance of this input document

Hey there, I have this input element created in React: <span className="btn-file" type='button'> <div style={{display:'flex',justifyContent:'space-around'}}> <span style ...

htmlcssreactjs

"Why does the font on my website look different on my computer before I upload it to my web host? How can I fix

I am currently developing a website and have chosen the font "PT Sans Narrow" for it. Unfortunately, it seems that Chrome and many other browsers do not support this font by default. Is there a way to include the PT Sans Narrow font with the website when ...

htmlcssfonts

Use selenium to locate an element based on its CSS selector

Looking to extract user information from each block using the following code snippet: driver.get("https://www.facebook.com/public/karim-pathan") wait = WebDriverWait(driver, 10) li_link = [] for s in driver.find_elements_by_class_name('clear ...

pythoncssseleniumselenium-webdriverweb-scraping

Tips for accessing a DOM element's ::before content using JavaScript

Is there a way to retrieve the content of a DOM element's ::before pseudo-element that was applied using CSS3? I've attempted several methods without success, and I'm feeling very confused! // https://rollbar.com/docs/ const links = docum ...

javascriptcssdompseudo-element

Generating numerous variables simultaneously is a feature of SASS

Is it possible to utilize a SASS map in order to generate individual variables for each key-value pair? For instance, I aim to achieve the following: $heading: ( 1: 5rem, 2: 4.5rem, 3: 4rem, 4: 3.5rem, 5: 3rem, 6: ...

htmlcssreactjssassless

Guide to adjusting margin size according to specific screen size thresholds?

I've set up a series of reactstrap cards that are dynamically organized into rows. On "md" screen sizes and larger (bootstrap), there will be 3 cards per row, while fewer screens will display 2 cards. Here's the component: <Card outline ...

htmlcssreactjsbootstrap-4

The error message is causing all blocks to change width. What steps can be taken to correct this issue

When the error message pops up, it causes the login form width to change. A shorter message makes it narrow while a longer message widens it. How can this be resolved without setting a fixed width? I am using FormHelperText element to show the error messa ...

htmlcssmaterial-ui

Position a Paper component in the center of a div

I'm having trouble centering my <Paper> element inside a div. Can anyone help me with this? I have placed both the <Paper> and <RaisedButton> elements inside the div and applied the following CSS: .timerArea { text-align: center; ...

cssreactjsmaterial-ui

Alignment of slider arrows in a CSS carousel with Bootstrap 4.1.1

Is there a way to position the carousel control arrows at the left and right ends of the screen in Bootstrap 4.1.1? I attempted the code below but it didn't yield the desired result. .carousel-control .icon-prev{ left: 5px } .carousel-control .icon ...

cssbootstrap-4carousel

Automatically scrolling down a div as new content is added using XMLHTTPRequest.openConnection

https://jsfiddle.net/kv5gbamg/ - I created a jsfiddle to demonstrate the functionality of the system Essentially, I am seeking a way to automatically scroll the scrollbar to the bottom every time a new message is received. My system updates the div with ...

javascriptjqueryhtmlcss