Fullwidth to boxed on mobile

Support
#1

Hi folks,

I was again wondering if there is really no way of having something like a If/Else selection with the fullwidth/boxed selection. The thing I want is just that when I open it on the mobile that it takes exactly the style when clicking on the boxed radio button and the fullwidth when clicking on the Fullwidth radio button. (see picture)

Isn’t there really no solution for that?

Thanks guys if there would be anyone who could help me out on that!

Franz

#2

Hi there,

Unfortunately, our theme does not have such a feature. You can use custom CSS code to somehow try to have the same functionality, but then you will lose all the settings of the theme and the CSS will override them on mobile. And it might have bugs here and there as the fact is we are trying to force our way into the boxed layout with custom CSS.

Having said that you can try this code by adding it to X > Launch > Options > CSS:

@media (max-width: 767px) {
	#top.site {
		max-width: 1170px;
		-webkit-flex: 1 1 auto;
		flex: 1 1 auto;
		position: relative;
		width: 100%;
		min-width: 1px;
		border: 1px solid rgba(0,0,0,0.275);
		border-top: 0;
		border-bottom: 0;
		background-color: #fff;
		box-shadow: 0 0 5px rgba(0,0,0,0.125);
		box-sizing: content-box;
	}

	.x-root {
		justify-content: center;
	}
}

The code above will force a boxed layout for devices which have the browser width of 767 pixels or smaller.

The code above is not part of our support scope and is just an extra try to be as helpful as we can.

Thank you.

#3

Hi,

thank you very much for your effort, you know, I really appreciate ever help! I implemented the code, but it does not change to boxed. Maybe it is only an issue with google chrome. Interestingly when opening the custom css on the mobile and having a preview of the site it works, but whenever i just regularily open the site it swichtes back to fullwidth again, no chance.

Any other ideas or would I now have to accept that this issue of mine might never be solved?

Thank you very much!

Franz

#4

Hi There,

Please your browser cache and test it again.

The code will affect any screen width below 767px independently of browser or device.

If the issue persists please provide your URL so we take a closer look.

Thanks

#5

Hi,

thank you very much for your help. I checked it again, cleared the caches (on mobile and on desktop), sadly still it doesnt work. The site (and this is only an example, there are more like this) would be: http://www.larp-oesterreich.at/wien/larpschmiede/ .

To describe the issue again: On chrome mobile browser the calendar on this site does not correctly open (see picture). I am using a samsung galaxy S8 as phone. The issue also pops up on other phones using the chrome browser.

I already talked hours thorugh with the calendar creator and they tried really hard from their side but could not reslove the issue in combination with the X-Theme. We tried it with other themes, there the issue could not be reproduced.

Looking forward to your help again. Thanks!
Franz

#6

Hi there,

Would you mind providing a sample screenshot on mobile of how it should be displayed? After investigation, the issues are pointing to the CSS from this URL http://www.larp-oesterreich.at/wp-content/plugins/eventON/assets/css/eventon_styles.css?ver=2.6.5.

Here are my findings,

  1. Instead of following the height of device’s screen, it follows the actual page height. Example, if screen height is just 667px, but page height has 2688px, then the popup will be placed around the end of 2688px due to bottom: 0; 
.evo_lightbox {
    overflow-x: hidden;
    overflow-y: auto;
    background-color: rgba(61, 61, 61, 0.8);
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 950000;
    padding-right: 17px;
    padding-left: 17px;
}

Try setting the left and bottom to auto and the box will be placed right above the device’s view.

  1. Second, the sizing of the content doesn’t respond to device’s size.

Our theme has no special CSS within HTML and BODY tag, plus the popup’s code is outside the theme’s code/structure.

Thanks!

#7

Hi,

I tried to implement your code and your suggestions. Sadly, this happended when I tried it:

To answer your other question, this is how it should look like on the mobile:

Looking forward to your answers and I still hope that there is a way of fixing it. I also contacted to calendar developer again and forwarded your suggestions. I am quite sure, that when both sides work on the problem it can be definitely solved.
Thank you guys so much for all your help so far - I am not giving up on the hope that this will still work out.

All the best,
Franz

#8

Hi there,

This seems to be a complete another case from what you have originally asked. You asked for a boxed layout for mobile and we suggested the code, but then you talked about a 3rd party plugin. Is the code we gave to the boxed layout causing the issue? or it is originally problematic without the code?

If the code is causing the issue I am afraid that you need to discard our suggestion and keep using the original version of the theme. But if it does not have anything to do with the code we suggested you need to open up a separate thread and ask for the problem and we will be more than happy to do our best to help.

Needless to say that support of the e3rd party plugin conflicts and layout issues with our theme is outside f our support scope and we suggest that plugin alternatives that we support such as the Modern Event Calendar.

Thank you for your understanding.

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.