Hello, dear developers!
There is a bug, which I think you just miss and can fix in the Page Puilder plugin. On tablets, If the row width set as Full Width, it is stretched through the whole screen anyway. It’s too long and complicated to describe every detail in my particular case, and there is no option to attach screenshots here. But I give the link to the sample page of my website (see below). It’s in Russian, but it’s clear visually what I mean as the problem. See the top row consisting of two sections. The header area from the left section is stretched. Following rows below look good on a tabled as for them the option “standard” is chosen for the row width. However, in the late case it looks not nice on a mobile phone (looks good if the option “Full Width” is selected). I guess you can fix this problem in your great saoftware. I mean to make option “Full Width” to look properly on a tablet. Thank you!
Sincerely,
Alex
Sample page: https://laborich.ru/copywriting/content-species-2/
Hi Alex,
Unfortunately, the linked page is coming up as a 404 for me. Can you please link me to a new page where I can inspect this issue?
Sure Alex,
Look at this, which I created specially for demonstration. And English title is added to the corrupted block: “Look at this on horizontal tablet”.
Link: https://laborich.ru/bug-page-example/
You can also see it in the menu bar.
Copare this block (very first and top on smartphone) with the other blocks on smartphone (looks very good – desirable), on PC and vertical tablet (also looks good), and on the horizontal tablet (corrupted). The difference with other blocks is that that this one has “Full Width” option set up for the title widget row. If you need, I can give you access to WP admin pannel to enable you to see. If you fix, it will be usefull also for all.
Please let me know if something unclear from me or if you need something more.
Thank you!
Sincerely,
Alex Laborich
Email: [email protected]
Hi Alex,
Thanks. This issue is caused by the following CSS present on your website:
.panel-row-style.mob-pad-0{padding:0 !important}This CSS directly interferes with how the row layout work which is why this issue is occurring. It’s also inside of a media query so it’ll only affect tablets. Due to your minify plugin, I’m unable to actually work out what is adding this CSS. Can you please temporarily disable your minify? This will allow me to work out the source of this CSS.
Hi Alex,
Thank you for your prompt checking up and reply. I minified (compressed if you mean this) the code including css by the Autoptimize plugin to WordPress. Now, I disabled the minification. However, bear in mind that the file style.css of the Sydney theme was compressed by another service. It’s irreversible itself (as least for me), hence original (structured) style.css can be obtained only by updating the Sydney theme on my site. It will affect other files of the theme, which I altered to the current needs (header.php, footer.php, etc.). But If you need this (original style.css), I will carry out the update.
However, there is a question. I’m not a programmer, hence sorry if I’m wrong. The problem I described looks to be general, i.e., not related to my particular website. Isn’t it possible to fix it in the original software file(s), which could be followed just by re-installing the plugin?
Thank you for your great help! Let me know if you need more from me.
Sincerely,
Alex
One note Alex,
I placed “Bug page – example” inside first menu item Лаборыч (first left in the main top menu bar). Link is the same: https://laborich.ru/bug-page-example/
I did it as the site should already look properly for users.
Hi Alex,
Thanks. I’ve been able to identify the source of the highlighted CSS – it’s your theme, Sydney. I would report this issue to aThemes.
The CSS used to cause this issue is being forced and not something I can override. Unfortunately, this means I’m unable to provide a workaround. I would ask how to avoid mob-pad-0 being added to the row (this class is being added by Sydney) because if that’s not being applied, the CSS causing you issues won’t be applied either.
Hi Alex,
Thank you very much for your job and reply. I’ll also try to inform aThemes regarding the issue with reference to your finding.
However, I’d be much appreciative of you indeed inform aThemes too, since in contrast to me you understand the problem perfectly and have found out the precise origin of it. Thus, you can describe it very correctly.
You mention that “the CSS used to cause this issue is being forced”. If you mean the Sydney’s style.css file (see the link below), this is me who “forced” it, i.e. I compressed with some online tool to enhance the site speed. I mentioned it in the message before.
https://laborich.ru/wp-content/themes/sydney/style.css
In principal, we can derive the original (not compressed) style.css from either Sydney theme newly updated on my website (I can do it) or from downloaded and unzipped theme archive (I think it’s possible). However, if aThemes will fix the issue themselves in their original software, it will be useful for all customers.
So, I think we can proceed on two ways, i.e. (i) to inform the developer and (ii) try to improve their style.css ourselves if it contains the problem. In the latter case, I’ll obtain the original file and provide it to you for processing.
Please let me know what we can do and what I can/should do on the issue.
Cheers!
Alex
Hi Alex,
Unfortunately, that’s not what I meant. By forced, I meant that the CSS contains !important. This small bit of text in CSS means “ignore everything else, I’m the most important”. It’s impossible for us to override their CSS unless we’re able to be more specific and more important and that’s not something we’re able to do in this situation – normally we would be able to but due to how row layouts work, that’s not an option.
The first option is the ideal option. The second option (editing the style.css) is definitely an option, but that’s not something we can specifically assist with or recommend (you could, in theory, just remove the highlighted CSS from the style.css).
Thanks Alex. I got. Than let’s write them from our both sides as they are “important” ))
Alex also advise please.
Should I keep the html/css code of the site uncompressed or I may compress it? The latter is preferable for enhancing site speed, and this in turn is important for better indexing of the site by search engines, i.e. for better SEO as search engines like faster pages for good ranking. My site is very young and right now it is undergoing indexing by the search engines.
I’m asking assuming that the site will be investigating by aThemes as well.
Thank you!
Hi Alex,
Oh, sorry! Yes, please re-enable your minify/compression plugins.
Please note that I wouldn’t recommend manually minifying CSS/JS files as the edited files will be replaced with unminified versions every time the theme/plugin updates which will mean you’ll need to constantly keep doing it. It’s best to rely on a minify plugin to do this for you.
I know Alex, thank you. But I still can’t write to the aTheme support forum as attempt to login after the registration results in notification that my login-act number is too high and I have to wait. But it was the very first login act. LOL )) I’ll try again ))