I created a Widget sidebar in my website, in the Desktop version it looks great but in the mobile I want to remove some options from there.
It is possible to create a Sidebar widget for the mobile version?
Hi,
Maybe there is a solution. Is the sidebar in a page or post? The composer has an option to hide specific elements, entire rows and columns as well.
So for example, in a page I set two widget sidebar elements – https://prnt.sc/olyipu Configure one with the content you want to display on desktop, and the other one for mobile.
Then hide the one that has to appear on mobile, for desktop – https://prnt.sc/olyk0q
Hide the one that has to appear on desktop, for mobile – https://prnt.sc/olykbq
This would be a solution, as there will be one sidebar for desktop and a different one for mobile.
Or maybe, if you want to use the same sidebar and only remove some elements for it on mobile, it can be done with CSS. A code can be created that will remove specific widgets from the sidebar on mobile.
Let me know.
Thanks
Thank for the info! The problem is that the sidebar is inside a post and not in a page.
CSS can be the fix for this issue also? If so, where I can do it?
You could use a cloud post template, then the above will also work. Cloud post templates can be designed with the composer – https://cloud.tagdiv.com/#/load/Single
So you could do what I suggested above in a cloud post template – https://prnt.sc/omb1rr
Or as I mentioned, if you just want to remove some widgets from the current post sidebar you have set, for mobile, I can provide a code for it. But I will need a link to where I can see the sidebar, and details about what you want removed on mobile from the sidebar widgets. Let me know.
Thanks!
This is the link for two pages with the sidebar widget:
https://yfztravel.com/category/hotels/
https://yfztravel.com/top-10-hotels-in-las-vegas/
I would like for example to remove the Instagram area from there and to change the number of posts from the :
1) RECENT POSTS
2) RANDOM ARTICLE
Can you please provide me the info where I neet to inset this code?
So you want to do this for category pages and post pages. I can provide a code to remove the Instagram section from the sidebar on mobile, I could also remove a post from those two blocks (the third module). The sidebar will look like this on mobile
– https://prnt.sc/omeysl
The code will apply to all category pages and post pages on mobile. It can be entered in the Theme panel->Custom code->CSS section
@media(max-width: 767px){
.category .td-main-sidebar .td_block_instagram,
.single .td-main-sidebar .td_block_instagram,
.category .td-main-sidebar .td_block_15 .td-cust-row:nth-child(2),
.category .td-main-sidebar .td_block_15 .td-cust-row:nth-child(2) {
display: none;
}}
I can modify it if needed. Let me know.
Thanks! The Instagram was removed but the other sections still have 2 rows
My mistake, I forgot to make a modification in the code before pasting it here. Remove it and add this one, should work fine now
@media(max-width: 767px){
.category .td-main-sidebar .td_block_instagram,
.single .td-main-sidebar .td_block_instagram,
.category .td-main-sidebar .td_block_15 .td-cust-row:nth-child(2),
.single .td-main-sidebar .td_block_15 .td-cust-row:nth-child(2) {
display: none;
}}
Please let me know if you have more questions.
Thanks
