Problem with a site when zooming in

Allgemeines
Post Reply
Cris74
Posts: 3
Joined: Thu 21. Jul 2022, 08:41

Problem with a site when zooming in

Post by Cris74 »

Hello and I am so glad for joining this community! I am not sure if this is the right place to post my question.

I work on a website, using CMSimple 5.8 and flex3cols2020_02 and I want to insert a slider with some pictures in the header, through MultiMediaSlider.

I got an issue... when zooming in to more than 80% on my PC, only the menu stays up, and the header and content go down below it.

If zooming out, it doesn't go back to the original layout.

This does not occur if instead of the slider I just insert a picture. The header stays well positioned at the top, no matter how large I zoom in.

Is there a solution so that when the slider is in the header and zooming in more and more, it stays at the top of the page? Any help would be appreciated.
Last edited by Cris74 on Sat 6. Aug 2022, 16:13, edited 2 times in total.
Gert
Posts: 2075
Joined: Sun 18. Nov 2012, 14:18

Re: Problem with a site when zooming in

Post by Gert »

Hello,

welcome to CMSimple ;)
Cris74 wrote: Sat 23. Jul 2022, 10:47 If zooming out, it doesn't go back to the original layout.
Only after page reload it goes back to the original layout.

MultiMediaSlider is not the best choice to switch images in header. The slider script "Fotorama" is not under developement anymore, and it did need jQuery to work.

Try ImageChangers, Demo:

https://www.ge-webdesign.de/demotpl/?Pl ... _im_Header

ImageChangers does not need jQuery or such things, and it is easier to handle in the backend.

Download: https://www.ge-webdesign.de/cmsimpleplu ... geChangers

Gert
Gert Ebersbach | CMSimple | Templates - Plugins - Services
Cris74
Posts: 3
Joined: Thu 21. Jul 2022, 08:41

Re: Problem with a site when zooming in

Post by Cris74 »

Hello Gert,

Thank you very much! It works flawless with ImageChangers, it keeps the original layout, both when zooming in and out.

I would have two small additional questions, if possible. How can I write the site name over this slider as background ? Like in the demo page https://www.ge-webdesign.de/demotpl/?Pl ... _im_Header.

And I wonder if there is any possibility to add in the site name field some new lines.

In the CMS Configuration/Title, the command <br>, after the site name does not creates a new line.

I could not find a better solution, but to create a separate <div> with two <p>'s for these two lines.

Regards,
Cris
Last edited by Cris74 on Sat 6. Aug 2022, 16:16, edited 2 times in total.
Gert
Posts: 2075
Joined: Sun 18. Nov 2012, 14:18

Re: Problem with a site when zooming in

Post by Gert »

Cris74 wrote: Mon 25. Jul 2022, 12:22 In the CMS Configuration/Title, the command <br>, after the site name does not creates a new line.
A template is a template and nothing more ;) - nobody forces you to use functions like sitename() in the header. You can write your output directly in the template.htm:

Code: Select all

<!-- sitename -->
<?php 
if(!$edit && !isset($_REQUEST['login']) && !isset($_REQUEST['logout']))
{
	echo '<h2 class="tplge_sitename">CMSimple Tests & Demos<br>... and something more</h2>';
}
?>
CSS for the class tplge_sitename, added " z-index: 2;" at the end of the line:

Code: Select all

.tplge_sitename {position: absolute; top: 0; max-width: 100%; background: transparent; font-family: SpecialElite, monospace; font-size: 56px; line-height: 64px; font-weight: 400; line-height: 1em; color: #fff; padding: 20px 20px 0 20px; font-variant: small-caps; opacity: 0.9; z-index: 2;}
The CSS tricks are position:absolute and z-index (increment until it works). You can surround the whole output with a div, for example:

Code: Select all

<div class="header_text">
...
</div>
... and style the class "header_text" with position: and z-index:, have fun and be creative ;)

Gert
Gert Ebersbach | CMSimple | Templates - Plugins - Services
Cris74
Posts: 3
Joined: Thu 21. Jul 2022, 08:41

Re: Problem with a site when zooming in

Post by Cris74 »

Thank you so very much, Gert! It is now clear how to change the header section according to the preferences.
Cris
Post Reply