logo does not adjust as desired / unwanted lightbox effect on linked images / .. - Support

Viewing 14 posts - 1 through 14 (of 14 total)

Author

Posts
December 19, 2022 at 9:45 am #1376671

web-und-text
Participant

Dear support team,
I have some issues that I need your help with.

The size of the logo (especially the mobile device Logo) in the header does not adjust as desired
1. As described in one of your support threads, I used a different logo for mobile devices (with different dimensions, narrower and therefore higher) via background-image. I don’t know if it’s because the header is much larger than necessary on medium-sized resolutions (a lot of blue space under the header graphic), which takes up an unnecessary amount of space on landscape screens – how can I prevent this? (my own CSS are not the cause, I disabled them for testing)
2. I don’t need a main menu and have hidden this for mobile devices. I would now like to use the available space to stretch the logo over the full width. (for desktop it is not mandatory, I could slide it to the right via position: relative….)
In resolutions up to about 770 px the mobile logo gets a fixed width (without me wanting that) instead of using the entire width – but it would be very important that the logo appears as large as possible, how can I do that change?

Unwanted lightbox effect on linked images
3. I have included images (which appear as a sidebar in the desktop version) using the code function, which refer to external pages (not images). I even deactivated the lightbox effect for it, but what still bothers me: As soon as I hover the images, the lower one slides to the next line (display: block) and stays there even when hover is no longer active, so the mouse pointer is somewhere else. How can this effect be prevented?

Columns narrower and centered on mobile devices?
4. I have 3 boxes with a colored background in the content area at the top, which I have implemented using colored columns in which there are text and images. My problem is that I want to limit the column width on mobile devices with max-width (this does work), but I also want to align these boxes in the middle/center (on mobile devices where is only one box per row) – which doesn’t work and is somehow logical, since it’s a column. Is there a more suitable Avia-element to achieve the same look or is there a trick with the existing setup?

Thanks in advance for your assistance.

December 20, 2022 at 8:10 pm #1376921

Mike
Moderator

Hey Antonie,
Thanks for your question, I see some login details but I don’t see your site URL, please include a link to your site.

Best regards,
Mike

December 20, 2022 at 9:47 pm #1376935

web-und-text
Participant

Hey Mike,
the first line in the private content is the URL, I just forgot to add “http://”, sorry.
I have tried to include all access data in my first question because would like to finish the project in the next days…
Thank you for helping.

December 21, 2022 at 2:21 pm #1376984
Mike
Moderator
Hi,
Thanks, now that you point it out I see it, for the logo on mobile landscape try this css:
```
@media only screen and (max-width: 820px) and (orientation: landscape) { 
	.html_header_top.html_header_sticky #top #wrap_all #main {
    padding-top: 216px !important;
}
#top #header_main > .container.av-logo-container {
	height: 150px;
    line-height: 150px;
}
}
```
After applying the css, please clear your browser cache and check.
Please see the screenshot in the Private Content area.

Best regards,
Mike
December 22, 2022 at 7:02 pm #1377138

web-und-text
Participant

Hello Mike,
thank you for help. In mobile landscape it looks great now, the “too much space” under the logo is away. So problem No. 1 is solved.
But in portrait mobile the logo is still much too small – see question No. 2 above, can I use 100% of the width for it?
And can you also help with question No. 4?
Thank you in advance.
Best regards,
Antonie

December 22, 2022 at 8:54 pm #1377151
Mike
Moderator
Hi,
For the mobile portrait logo try this css
```
@media only screen  and (max-width: 767px) and (orientation: portrait) { 
	.responsive #top .logo {
    width: 100%;
	}
	.responsive #top #wrap_all .container {
    width: 100%;
    max-width: 100%;
	}
	.responsive #top .logo a {
    height: 14vh;
	}
	.responsive .logo img {
    height: fit-content;
    max-width: fit-content;
    max-height: fit-content;
	}
}
```
In this css the width of the logo is set by the height of the logo link (a) we can’t use a percentage so we use visual height which may be a little tricky depending on the device, in my test the height: 14vh; seems to be the sweet spot but feel free to adjust to best suit your tests.

Best regards,
Mike
January 4, 2023 at 5:56 pm #1377640

web-und-text
Participant

Dear Mike,
I hope you had a good start into the new year und wish you all the best :-)
Thank you very much for the code, this works well and looks great.
Now only problem No. 4 is left – can you also help me with this?

Thank you,
Antonie

January 5, 2023 at 1:59 am #1377664

Ismael
Moderator

Hi,

4.) The columns should automatically break into a single column on mobile view. Would you mind providing a screenshot of the issue? You can use imgur, savvyify or dropbox. Thanks.

Best regards,
Ismael

January 5, 2023 at 5:32 pm #1377721

web-und-text
Participant

Hi Ismael,
yes, and I would like to make this one single column narrower (fixed max-width) and center it (with more white space left and right of it). Is this possible or did I use the wrong element for what I want?
Thanks for your help.
Antonie

January 6, 2023 at 9:58 am #1377800
Ismael
Moderator
Hi,

Thank you for the clarification.

You can use this css code to adjust the width of the gallery columns on mobile view.
```
/*
Mobile Styles
================================================== */
/* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */

@media only screen and (max-width: 767px) {
	/* Add your Mobile Styles here */
	.galerie figure {
		float: left;
		max-width: 100%;
		margin-right: 0;
		width: 100%;
	}

	.galerie figure img {
		width: 100%;
	}
}
```
Please toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css code.

Best regards,
Ismael
January 9, 2023 at 6:03 pm #1378032
web-und-text
Participant
Hello Ismael,
I don’t mean the .galerie figure elements, I mean the boxes (#willkommen .box) with the red craft-icons, directly under the first headline – I used flex-columns with coloured backgrund. (please see my first question, Point 4, for more details, or I can send you a screenshot).
Since I couldn’t get them centered, I offset them to the right with the following code:
```
@media screen and (max-width:550px) {

#willkommen .box {
	position: relative;
	left: 15%;
}
}
```
My question was: Is it possible to make the flex_columns narrower and center them – or is there another way to achieve what I want with an other Avia Element.
Thank you very much,
Antonie
January 10, 2023 at 2:36 pm #1378148
Mike
Moderator
Hi,
Thanks for the feedback, when I check I see that you have set the width of the boxes with this css:
```
#willkommen .box {
    max-width: 22em;
}
```
which leaves a white margin on the right site, to make the margin equal on both sides try adding this css:
```
@media only screen  and (max-width: 767px) { 
.responsive #top #wrap_all .flex_column.box {
	  margin: auto;
}
}
```
Please see the screenshot in the Private Content area of the expected results.

Best regards,
Mike
January 10, 2023 at 5:15 pm #1378164

web-und-text
Participant

Hello Mike,
thank you very much. Your code did it – I only hat to change it to “margin: 1.5em auto” (otherwise the boxes would have run into each other at the top and bottom without a gap – as shown also in your screenshot) – and I could delete my code for “position relative”.

Thank you very much. Now there are no more questions left from my support ticket above :-)

Best regards,
Antonie

January 10, 2023 at 7:59 pm #1378166

Mike
Moderator

Hi,

Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike
Author

Posts

Viewing 14 posts - 1 through 14 (of 14 total)

The topic ‘logo does not adjust as desired / unwanted lightbox effect on linked images / ..’ is closed to new replies.