Tips for creating a responsive WP sidebar that appears at the bottom of the page on small screens

I attempted to enhance the appearance of my website by adding CSS code to the child theme's stylesheet, specifically targeting mobile devices. However, despite my efforts, the changes did not take effect.

/* Styling for Mobiles in Portrait Mode */
@media only screen 
and (max-width : 320px) {
    .widget-area {
        float: left;
        width: 100%;
        background-color: #E3E3E3;
    }
}

/* Styling for Mobiles in Landscape Mode */
@media only screen 
and (min-width : 321px) 
and (max-width : 480px) {
    .widget-area {
        float: left;
        width: 100%;
        background-color: #E3E3E3;
    }
}

If you'd like to see my attempts for yourself, visit my WordPress website.

csswordpressresponsivesidebar

Answer №1

.section-panel typically resides within .sidebar-wrapper, so you may be targeting the incorrect class.

To learn more, check out WP-Beginners and WP-Codex

Updated Information:

Considering your website's HTML structure, you should use:

.right-sidebar .main-content {
    width: 100%;
    float: left;
    margin-right: 5%;
}

.right-sidebar .widget-section {
    float: left;
    width: 100%;
    background: #E3E3E3;
}

The styles you applied were overridden by the body class named .right-sidebar

Thank you.

Answer №2

Insert the following snippets of code into this specific location: 

/wp-content/themes/storefront-child-theme-master/style.css

@media (max-width: 66.4989378333em){
.col-full {
    margin-left: 2.617924em;
    margin-right: 2.617924em;
    padding: 0;
    display: flex;
    flex-direction: column;
}
}

@media (max-width: 66.4989378333em){
.right-sidebar .widget-area {
    width: 100%
}
}

@media (max-width: 66.4989378333em){
.right-sidebar .content-area {
    width: 100%
}
}

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

The gap separating the three columns in the DIVs structure

Here is an example that I need The images are being loaded from a MySQL while loop, and I want the spacing between them to be such that the left column and right column touch each side with the middle image centered. Just like in the picture :D This is m ...

htmlcsscss-float

"Bootstrap 4 with the ability to display multiple content sections under a

Currently, I am experimenting with bootstrap tabs and my goal is to have a single tab with multiple content divs. I attempted to achieve this by using two data-target values like data-target=".etab-p1, .etabi-img1". However, the solution only seems to work ...

javascriptjqueryhtmlcssbootstrap-4

Bootstrap image with simplistic arrow indicators

I'm facing a minor issue that I need help solving. I want to have two simple arrows (one pointing left and one right) vertically aligned in the center of an image. Additionally, these arrows should resize proportionally when the screen size changes. ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Issue with Material UI styles not applied in component (alert: multiple occurrences of `@material-ui/styles`)

I have developed a standalone React component that utilizes the Material UI (4.8.3) library and have uploaded it to a private NPM package for use across various applications. The standalone component project is functioning properly (tested using Storybook ...

javascriptcssreactjsmaterial-ui

Designing a unique 24-column grid system for Bootstrap 4

I'm working on a project and looking to incorporate some bootstrap elements into my HTML files for UI development. My goal is to modify the standard grid size from 12 to 24. I've read through the documentation, but I'm unsure of where exactl ...

htmlcsstwitter-bootstrapsassbootstrap-4

Getting rid of a blue border from a button upon clicking

Here is the problematic section of code :root { --color-foreground-text-main: rgb(255, 72, 142); --color-foreground-text-sub: rgb(0, 114, 153); } html, body { height: 100%; } img { max-width: 100%; } #cover { background: #222 url('Reso ...

htmlcssbootstrap-4

What can we do to ensure our animation does not start automatically, but only after it is clicked?

After clicking the menu button, I'm looking for an animation to be triggered. I attempted to use if and function, but unfortunately it was unsuccessful. If you'd like to take a look at the code, click here. ...

javascripthtmlcssgsap

Is it possible to dynamically add attributes to XHTML tags using Javascript? For instance, adding a title attribute to an anchor tag like <a title="text">

Is it possible to modify XHTML source code through JavaScript? Can attributes be added to any XHTML tag dynamically, such as adding a title attribute to an anchor tag (<a title="text">)? ...

javascriptjquerycssxhtml

Having issues with the jQuery .css function?

I need help with hiding and showing tabs on my webpage based on a successful login. I have tried various methods, such as setting the tab to be hidden by default in the HTML code and then using JavaScript to display it upon login. However, none of these me ...

javascriptjqueryhtmlcsstabs

The overflow property is set to scroll in jQuery, causing continuous scrolling until reaching a certain point, at which it

Continuously adding new chat messages will show the latest one, but eventually it stops scrolling down automatically. How do I resolve this issue? Thank you. http://jsfiddle.net/VMcsU/ $("#button1").click(function(){ $("<div>").html("text").app ...

javascriptjqueryhtmlcss

Retrieving the background image URL from inline CSS using jQuery

I'm looking for a link similar to url(img/bg/06.jpg), but when using jQuery, I get a longer link like url("file:///D:/WORKING%20FILE/One%20Landing%20Page/version/img/bg/06.jpg") https://i.stack.imgur.com/8WKgv.png Below is the code snippet in questi ...

jqueryhtmlcss

Tips on placing two transparent images so they overlap at diagonal corners of a container element

A print graphic designer provided me with a PSD comp that I'm unsure about translating to the web. I already have a black-bordered, round-corner container in place. There are multiple z-indexed divs on the page, making it difficult to determine stac ...

cssimagepositioninghtmloverlapping

Issue with Navbar Collapse Toggle not deactivating (following transition from bootstrap v4 beta to v4 alpha 6)

Recently, I encountered an issue with my navbar after switching to v4 alpha 6 in order to utilize the responsive utilities that this version offered. If you visit the following page: , you will see what I mean. Prior to upgrading to v4 alpha 6, all menu ...

jqueryhtmlcsstwitter-bootstrap

positioning of content on the left, right, and center

My task involves using CSS to adjust the positions of various elements on a webpage. Currently, the right position navigation bar and the liquid layout are working fine, but the positioning of the "content" and "right navigation bar" is not correct. I ai ...

htmlcsspanelnavigationbar

I am currently grappling with a JavaScript mouse over event and encountering some difficulties

I am looking to dynamically change the background image of my body div whenever a link is hovered over. Here is a snippet of my code: JAVASCRIPT: var i = 0, anchors = document.querySelectorAll("zoom"), background = document.getElementById("body") ...

javascripthtmlcss

Columns are not properly aligning side by side within the .card class

I am facing an issue where my cards are not lining up inline next to each other in columns but are instead jumping under each other. I have tried setting the col-md-6 class to align two of them next to each other, but that did not work. I have also checked ...

htmlcssbootstrap-4

What is the best way to customize the scroll bar of a Vuetify v-data-table?

Currently, I am working with a Vuetify v-data-table and I am interested in customizing the scroll bar of the data table. The current look is as seen here: https://i.sstatic.net/0GDXW.png Is there a way for me to style it according to my preference? ...

javascriptcssvue.jsvuetify.js

Formatting tables

Below is the table structure that I have. I attempted to insert empty tds divs in order to achieve the formatting shown in the image, but I have not been successful. Any suggestions or ideas would be greatly appreciated. <table border="0" cellpadding=" ...

htmlcss

How can I apply column spacing specifically for both desktop and mobile devices using only Bootstrap 4?

I am struggling to create a 15px gap between two rows and columns on both desktop and mobile using bootstrap. I know there is something with margins, but I can't figure out the best way to implement it. For the second row, I want two columns to appea ...

htmlcssbootstrap-4

What is the best way to position a div to the right of a title div without disrupting the title's content?

Can someone provide guidance on how to achieve the following layout: I need a green container div that is 700 pixels wide. Inside this container, there should be a blue title area that spans the width of the green container with centered text for the titl ...

htmlcsscss-float