Template doesn't work as expected

Please post the URLs to pages, where you've made a CMSimple template available for download

Moderator: mikey

Post Reply
Tata
Posts: 3586
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Template doesn't work as expected

Post by Tata » Thu Sep 23, 2021 4:15 pm

I work on a template for my daughter in law. I am trying to convert her WP webpage to CMSimple_XH. In standard resolution everything works pretty fine. But not so in smaller resolution (iPhone). It works fine on PC using the developer tool for responsivity.
There is a problem with the swiper plugin, also something makes a space on the right limit. Here I tried anythin in my mind, without any success.
The test page is HERE
Please, template gurus, could you have a look? I send the login in PM, if necessary.
Thanks in advance.
The conversion to CMSimple is only a challenge, no real need.
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

frase
Posts: 5085
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: Template doesn't work as expected

Post by frase » Thu Sep 23, 2021 4:36 pm

Tata wrote:
Thu Sep 23, 2021 4:15 pm
There is a problem with the swiper plugin, also something makes a space on the right limit. Here I tried anythin in my mind, without any success.
The first problem is your width calculation.
If you specify 100% width and the element has a padding, then it will be too wide by exactly this value.
Specifically on this page:
http://cmsimple.sk/test9space/?PROJECTS

Code: Select all

section.light {
	min-width: 340px;
	width: 100% ;
	padding: 2rem 5vw;
	background: #fefefe;
	color: #000;
}
If you change here:

Code: Select all

width: calc(100% - 10vw);
2 x 5vw padding = 10vw
Then the swiper should also adjust properly and the page should no longer have an overflow (right).

frase
Posts: 5085
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: Template doesn't work as expected

Post by frase » Thu Sep 23, 2021 5:09 pm

Note the spelling!
On the right and on the left of the minus sign spaces must be inserted!

Code: Select all

width: calc(100% - 10vw);
And also take a look at the browser console.
There is something wrong with your JS.

Tata
Posts: 3586
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: Template doesn't work as expected

Post by Tata » Thu Sep 23, 2021 8:14 pm

Something is corrected. Thaks to the hint. Something is still inexplainable to me.
I have in stylesheet:

Code: Select all

			div.preview-1-block,
			div.preview-2-block,
			div.preview-1-2-block,
			div.preview-2-1-block{display:flex; flex-wrap: wrap; justify-content: space-around;align-content: stretch;}
				div.preview-1-block img{width: 100%; height:auto}
				div.preview-2-block img{width:50%; height:auto}
				div.img-img{min-width:320px; width:33.5%;}
					div.img-img img{width:100%; height:auto}
				div.img{min-width:320px; width:66.5%; height:auto}
				div.img img{width:100%; height:auto}
and in content
<section class="preview-1-2 light">
<div class="wrapper">
<div class="preview-1-2-block">
<div class="img"><img src="./userfiles/images/2019/12/19_1200x1360.jpg" alt="Short image description" width="1140" height="646"></div>
<div class="img-img"><img src="./userfiles/images/2019/12/19_2-1200-680.jpg" alt="Short image description" width="564" height="320"> <img src="./userfiles/images/2019/12/19_1-1200x680.jpg" alt="Short image description"></div>
</div>
</div>
</section>
and also other combination of images. On android and iPhone, these images are not responsive. They change only their width. It seems as if the height:auto doesn't work here.
EDIT: I stick at the responsivity now. Brrr, angry. Never had such problem. The images on http://cmsimpe.sk/test9space/?PROJECTS/HKC simply ignore the responsivity settings.
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

frase
Posts: 5085
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: Template doesn't work as expected

Post by frase » Fri Sep 24, 2021 6:57 am

This page:
http://cmsimple.sk/test9space/?PROJECTS/HKC

Here you have again a page overflow on the right side.
The cause of this is:

Code: Select all

@media screen and (max-width: 799px){
...
.floating-box {
    float:left;
    padding-left:0;
    width:100vw;
}
...
If you calculate the width differently, the page width is correct again:

Code: Select all

width: calc(100vw - 20vw);
You always have to correct such things first before you examine the others. (JS errors too!)

As for the problems with the images, that's because the flexboxes are declared incorrectly.
Since I don't know how you want it, I can't give any specific advice there.
Sometimes, however, the image dimensions, which TinyMCE automatically appends to the image tags, interfere. You should remove them manually.
Only when the small bugs have been eliminated can you investigate further.

Tata
Posts: 3586
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: Template doesn't work as expected

Post by Tata » Fri Sep 24, 2021 10:36 am

So, I think everything I was able to, is solved. About the JS - I have used no JS of my own. If there are any errors, they must come from used plugins. In this topic are my skills VERY limitted.
The only thing remained. The backgrounds are not responsive.
full-width.jpg
responsiv.jpg
The backgrounds are defined by morepagedata and there is a div on each relevant page creating an empty bloch before the rest of the page content.

Code: Select all

div.blank-page img{width: 100%; height:auto;}
I am not sure how to set the background responsive.
You do not have the required permissions to view the files attached to this post.
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

frase
Posts: 5085
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: Template doesn't work as expected

Post by frase » Fri Sep 24, 2021 11:02 am

Tata wrote:
Fri Sep 24, 2021 10:36 am
If there are any errors, they must come from used plugins.
No, the errors come from the template JS.
You don't need most of what's in there. You only need the part for the #topLink - the rest can/should go.
Tata wrote:
Fri Sep 24, 2021 10:36 am
The only thing remained. The backgrounds are not responsive.
I'm afraid this is a cache issue on your smartphone. It looks like your changes haven't arrived yet.
Clear browser cache on the smartphone!

Tata
Posts: 3586
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: Template doesn't work as expected

Post by Tata » Fri Sep 24, 2021 11:32 am

frase wrote:
Fri Sep 24, 2021 11:02 am
No, the errors come from the template JS.
You don't need most of what's in there. You only need the part for the #topLink - the rest can/should go.
There are no other scripts in the template. Only the TopLink.
Cache cleaning made no change.
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

frase
Posts: 5085
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: Template doesn't work as expected

Post by frase » Fri Sep 24, 2021 11:46 am

Delete this line in the template:

Code: Select all

<script src='<?=$pth['folder']['template']?>scripts/script.min.js'></script>
Instead, you write in this exact spot:

Code: Select all

<script>
jQuery(document).ready(function ($) {
    var offset = 150;
    var duration = 600;
    jQuery(window).scroll(function () {
        if (jQuery(this).scrollTop() > offset) {
            jQuery('#topLink').fadeIn(duration);
        } else {
            jQuery('#topLink').fadeOut(duration);
        }
    });
    jQuery('#topLink').click(function (event) {
        event.preventDefault();
        jQuery('html, body').animate({
            scrollTop: 0
        }, duration);
        return false;
    })
});
</scrip>
This should preserve the scroll function - and the errors should be gone - and you have one call less.

Tata
Posts: 3586
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: Template doesn't work as expected

Post by Tata » Fri Sep 24, 2021 2:36 pm

Well, I did. But has it had no impact to the functionality, though. Still can't find the way how to make the "morepagedata given" backgrounds responsive. Svasti seems to be off since Aug. 2020. Does anybody know how to? The backgrounds are responsive from 1920px to about 1600px. Then the responsivity stops working.
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

Post Reply