Alignment issue on Product page, License section

[Emrah AvciParticipant]

Hello.
There are 2 posts I shared on the forum. I haven’t found a solution yet. I would like your help by showing it in detail, with screenshots.
I really need help with one. Right now, I can say that the part of my website that I need correction the most.
I bought the Symbiostock Express theme 5-6 years ago.

I updated the theme as soon as I installed it on my website last month. But there is a problem.

There is no alignment on the page where the licenses appear. Screenshot here: https://drive.google.com/file/d/1sAPPaJxnNUOKmrJxyxp0DbO_QgvCxHi2/view?usp=sharing

The summary of my question is: I am using the current version of Symbiostock Express theme. How can I align the boxes, texts, sections in the license section of the product pages, in the previous version of the theme, that I uploaded a screenshot of, and how can I show the title?

– – – – – – – – – – – – – –

I re-installed Wodpress on a section on my website for try and installed Symbiostock’s theme that I bought 5-6 years ago, and I did not update the theme. I installed Symbiostock Pro and Woocommerce and uploaded an image. In Symbistock Express theme settings, in Product Settings, at the bottom of my page there are two options: Display a text-based radio licenses selection = ON or OFF

With On selected, there is a dot-shaped license selection section just like on the demo page of the Symbistock Express theme. When OFF is selected, there are rectangular license selection boxes as in the latest version of Symbiostock Express theme. https://demo.symbiostock.org/product/aerial-view-of-city-buildings/

Screenshot showing the difference: https://drive.google.com/file/d/1M3lqW8qJL1jsbaHA4dvZGK0ZiPl9K3MY/view?usp=sharing

But this feature does not work with the updated Symbiostock Express theme. Although it works, I don’t want dot select license part.

This image, from the previous version Express theme: https://drive.google.com/file/d/1SoVMAAteLS1LsmPGTcLhISeoNdqlyzD9/view?usp=sharing
To try, I made the license types’ names in different character lengths but still aligned. I want this same license page in my current Symbiostock Express theme that was in the old theme.

– – – – – – – – – – – – – –

My other question is, I bought the Symbiostock Anytype plugin. Since I will upload ZIP files, I do not want Resolution to appear in the license section. For Thumbnail images, the size of the image I uploaded is how many pixels, the resolution is written in all licenses in the license section. How can I get it to write File Type: ZIP in that part? Or if I can’t do that, I should at least remove the Resolution part entirely.

– – – – – – – – – – – – – –

I should either use license names with the same character length (which seems impossible), or use Large Layout in the Symbistock Express theme settings. But;

If I also use Large Layout in Product Settings – Single Product Layout in Symbiostock Express theme settings, even if I make Shop Single Image Size 7000 pixels wide in Symbistock Settings-Media, there is still a gap between the image and the licenses. (Every time I change the setting, I upload a new image and experiment) Here is the screenshot showing this gap: https://drive.google.com/file/d/1aEqnauTzqQt_Z0QndPCnXEkhtX7YJita/view?usp=sharing

But I don’t want to use Large Layout either.

– – – – – – – – – – – – – –

My post is a bit long, sorry.

[RobinKeymaster]

Hi Emrah,

With the screenshot you’ve provided, it looks like the titles are being shown? Those are the clickable boxes. What other titles are you referring to? As for the alignment, in order to remain responsive, it was changed from tables to cells, and accordingly, they do not align the same. However, you can achieve a similar effect by creating your own CSS and using the “flex” style to make everything even out. It’s relatively simple if you follow this tutorial:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

The old dot interface was removed due to limitations with the new version of WooCommerce – however, the alignment issue can be tweaked as per the advice above. You make the parent class display as “flex”, then play around with the “justify-content” and “align-items” CSS variables.

If you don’t want to use the large layout, then the gap does not exist, then is there a problem?

As for AnyType, I believe it uses the base largest resolution of the image you have on hand as reference. However, we will look into being able to remove or customize this for AnyType, thank you.

[Emrah AvciParticipant]

Hello Robin. Thank you so much.

I found a solution to this, maybe I did it wrong, but I got the following result: https://drive.google.com/file/d/1AWbMEOzn9ii4X-RnHq_GP_dEyzWThNaU/view?usp=sharing

What you wrote to me should be true. I will try to learn how to do it too.

I want to write how I did it for those who do not know like me:

See the screenshot here and change the max and min width in the sections I marked and see the results. https://drive.google.com/file/d/1QiFJ_ofxNqewhSJZ5B0dxXFt-pzOdzco/view?usp=sharing
In this way, I wrote 2 lines of text in one line.

Then find the sse_css file in your theme and paste the settings you made here and save. (…wp-content-themes-symbiostock-express)

I guess this method will change in the next theme update. This gives me an experience. Either I learn to do it the way Robin tells me or I arrange it that way every time. 🙂

– – –

This is how I solved my second question: Since I’m going to upload ZIP files, I wanted File Type and ZIP to be written in the Resolution section. As I couldn’t find how to do it for now, I removed that part. This is how I did it. I pasted the code below at the bottom of the sse_css file that I showed in the screenshot above and the Resolution part is hidden.

.sse_product_license_resolution {
display: none;
}

[Author]

Posts