I have a long list of menu, which mean the content of sidebar will overflow, when the content is long, the user can not see get the bottom of the sidebar easlily, which Koji theme can.
How to make those two columes can be scrolled individually?

I am using shortcode for product categories. I have added a bit of css to scale the image icon on mouse-over. It appears overflow: hidden, will not work for me, so how can I crop the image to contain it within it’s space.

Css (neither of the overflow kicks in):

/*** product_categories - Grid Image Styling ***/
.woocommerce ul.products li.product a img {
	border-radius: 25px;
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .2s ease-in-out;
	transition: .2s ease-in-out;
}

.woocommerce ul.products li.product a img:hover {
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
	overflow: hidden !important;
}


/**** Category Image Container in Grid ****/
  ul.awf-product-categories li.product-category,
  ul.awf-product-categories li.product-category.last,
  ul.awf-product-categories.columns-3 li.product-category,
  ul.awf-product-categories.columns-4 li.product-category,
  ul.awf-product-categories.columns-5 li.product-category,
  ul.awf-product-categories.columns-6 li.product-category {
	position: relative;
	margin: -3px 1px;
	width: 24,5%;
	overflow: hidden !important;
}

How can I fix this?

So I am currently working on a new online store, https://adaline.ro/ , and I have a issue with the Header on some mobile devices (for example on iphone 12 pro and 14 pro the issue isn’t present). Whenever you enter from a phone with a wider screen, web archive looks like it is not centered but in fact you have to zoom out, and after you do that you can see the blank space in the right side of the header. I kind of know that the problem is caused by some overflow, maybe something from the header element, as when I delete the shopping cart button the problem is kind of solved (the header is on the full width of the page) but at the same time the layout of the product archive changes from two columns to only 1 column, so there is something to further investigate and I already lost a lot of time on it and maybe you have more ideas.

The confusion
What’s weird is that the page which displays single posts (let’s call it “single_posts.htm“) works fine. See attached images.

Webdesign
single_posts.htm follows a global template that applies for most pages on the site. The template has a main column (“Is Main Column – yes”) and a sidebar (“Is Sidebar – yes”). The sidebar content is loaded from a template which randomly displays selected posts. On single_posts.htm, the main column content is fetched from the post content (title, date, featured image, and post content).

all_posts.htm is based on the global template design, but does not follow any template. Main column and a sidebar as in above. The main column displays all blog posts in a loop grid (“grid.loop“). grid.loop has the same design as the main column content in single_posts.htm.

Questions
What causes the issues? Should I design my pages using different methods?

Technical info
Elementor 3.21.4
Elementor Pro 3.21.2
SmartMag Child 1.1
Safari 17.4.1
Chrome 124.0.6367.119
Opera 109.0.5097.68
MacOS 14.4.1 (M2 Pro)

I have tried to show a line on this button. I have used the dynamic post title as button text. Then trying to control the title lenght but its not working.

At the same time, the anchor link?https://www.a-hr.pro/#business?works absolutely fine on the homepage

I’ve checked with Bloksy team and it seems the issue happen because Stackable adds overflow: hidden to all of their containers, which is broken in combination with the scroll-margin-top propriety

Could you please advise if this is expected to be fixed any soon and if there are any workaround to avoid such weird behaviour?

Thanks

Tor Browser is a web browser based on Firefox that is used by many people living in oppressive countries or who otherwise need to use privacy tools to protect themselves online (eg when searching for information about a sensitive subject such as cancer).

Unfortunately, it appears that websites using this theme are completely broken on Tor Browser with “Safest” settings enabled. This, among other things, disables less-secure options such as Javascript.

* https://tb-manual.torproject.org/security-settings/

It is reasonable for a theme to follow the Progressive Enhancement concept, such that some flashy bells & whistles may not fully function when Javascript is disabled. However, it is not acceptable for something as critical as the navigation menu bar to be inaccessible to users with javascript disabled.

* https://en.wikipedia.org/wiki/Progressive_enhancement

Is there any currently-functioning workaround for this bug (eg to substitute the javascript hamburger menu function with a CSS-capable menu) so this theme is accessible to Tor Browser users with “Safest” settings enabled?

I’m looking for a very popular (>99,000 active installs) free or freemium theme that’s fast, ligthweight, and has good integration with WooCommerce. After some searching, I decided to try a couple very popular themes:

* GeneratePress
* Neve

Unfortunately, I was very disappointed in testing the demo sites of these themes to discover that they were completely broken on Tor Browser with “Safest” settings enabled. This, among other things, disables less-secure options such as Javascript.

* https://tb-manual.torproject.org/security-settings/

It’s important to me that my website is at least fully functional for at-risk customers that use tools to protect themselves (following the concept of Progressive Enhancement)

* https://en.wikipedia.org/wiki/Progressive_enhancement

The most obvious issue with the themes I’ve tested is that the hamburger menu does nothing when you click on it in Tor Browser with “Safest” settings enabled. If the user can’t access the menu, then they cannot navigate or use the website.

Are there any popular wordpress themes whose hamburger menus is functioning on Tor Browser’s “Safest” settings?

Comments widget in sidebar is broken

Overflow is not handled. Add the following:

overflow-wrap: anywhere;

Commets in Posts: No space between the name and “says”.