Template doesn't work as expected
Moderator: mikey
Template doesn't work as expected
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.
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.
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.
Re: Template doesn't work as expected
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;
}
Code: Select all
width: calc(100% - 10vw);
Then the swiper should also adjust properly and the page should no longer have an overflow (right).
Re: Template doesn't work as expected
Note the spelling!
On the right and on the left of the minus sign spaces must be inserted!
And also take a look at the browser console.
There is something wrong with your JS.
On the right and on the left of the minus sign spaces must be inserted!
Code: Select all
width: calc(100% - 10vw);
There is something wrong with your JS.
Re: Template doesn't work as expected
Something is corrected. Thaks to the hint. Something is still inexplainable to me.
I have in stylesheet:and in content
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.
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 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.<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>
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.
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.
Re: Template doesn't work as expected
This page:
http://cmsimple.sk/test9space/?PROJECTS/HKC
Here you have again a page overflow on the right side.
The cause of this is:
If you calculate the width differently, the page width is correct again:
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.
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;
}
...
Code: Select all
width: calc(100vw - 20vw);
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.
Re: Template doesn't work as expected
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. 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.
I am not sure how to set the background responsive.
The only thing remained. The backgrounds are not responsive. 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;}
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.
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.
Re: Template doesn't work as expected
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.
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!
Re: Template doesn't work as expected
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.
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.
Re: Template doesn't work as expected
Delete this line in the template:
Instead, you write in this exact spot:
This should preserve the scroll function - and the errors should be gone - and you have one call less.
Code: Select all
<script src='<?=$pth['folder']['template']?>scripts/script.min.js'></script>
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>
Re: Template doesn't work as expected
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.
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.