Removing whitespace on mobile version only on new.selectors.dk

Hi support,

I´m pleased with my site on my computer but the responsive design on mobile is showing a lot of whitespace after the header video. I would like the 3 icons “Search & Selection”, “Strategi & eksekvering” and “HR-Development” to be a lot closer to the header video. Please have a look at the attached picture to see how I would like it to look.

Kind regards,
Lisa

whitespace issue on mobile website

Hello Lisa,

First thanks for using our theme!

That’s because there’s a custom CSS code forcing the sydney hero are to have 690px in all resolutions.

image

My suggestion for you is remove the above code from Appearance > Customize > Additional CSS and replace with the below code:

@media(max-width: 767px) {
	.wp-custom-header video {
		max-width: none;
		width: 200%;
		position: relative;
		left: 50%;
		transform: translate3d(-50%, 0, 0);
	}
}

We hope this helps!

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

aThemes Support

Hi Rodrigo,
I don´t see any difference on the mobile version.

The whitespace after the header video is still enormous and our 3 links (the 3 icons: Search & Selection, strategi & eksekvering and HR-Development is still located very far down on the frontpage and not right after the header video as shown on the attached picture.
In the attached picture, you can see the bottom of the video at the very top and right below the 3 icons. That is how I want it to look on the mobile version and tablet.

Kind regards,
Lisa

Hello Lisa,

I did a inspection in your website now and seems the code I provided for you it’s working:

Maybe it’s a cache issue at your side. Please try clearing your browser cache to see the new changes.

We hope this helps!

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

aThemes Support

Hi Rodrigo,
You´re right, it was a cache issue.
Is there any way to minimize the whitespace even more, so the top of the “Search & Selection”-icon is closer to the video? If so which part of the code do I need to change?
I ask because on an Iphone 7, you can´t see any part of the icon without scrolling down, and we would like iPhone 7 users to see a least a little bit of the “Search & Selection”-icon without scrolling.

Kind regards,
Lisa

Hello Lisa,

Great!

You can try reducing the width value from the CSS the code I sent for you.

We hope this helps!

Let us know if you need further assistance.

Kind Regards,

Rodrigo.

aThemes Support

Hi Rodrigo,
Perfect!
Thank you so much for execellent service.
/ Lisa

Hello Lisa,

You are welcome!

Let us know if you need any further help.

Kind Regards,

Rodrigo.

aThemes Support

Hi Rodrigo,
On the mobile version, I would like to have the same blue background colour in the menu as on the desktop version: #18395c
Can you please help me with that?
PS: Is there any way to have h2 and h3 headings bold on the mobile version only?

Kind regards,
Lisa

Hello Lisa,

Please try adding the given custom CSS code below at Appearance > Customize > Additional CSS:

.mainnav.toggled, 
#mainnav-mobi {
	background-color: #18395c;
}
.mainnav.toggled ul.sub-menu, 
#mainnav-mobi ul.sub-menu {
	background-color: #15314e;
}
.mainnav.toggled ul li, 
#mainnav-mobi ul li {
	border-top-color: #142940;
}

Regarding h2 and h3 bold on mobile, please try with this CSS:

@media(max-width: 1024px) {
	h2, h3 {
		font-weight: 800 !important;
	}
}

We hope this helps!

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

aThemes Support

Perfect! Thats exactly how it´s supposed to be! Thank you so much!!

Is there any way to remove the whitespace between the menu and the image on al subpages on mobile version only?

Best regards,
Lisa

Hello Lisa,

Great!

Please try with this custom CSS code:

@media(max-width: 1024px) {
	body.page .page-wrap {
		padding-top: 0 !important;
        margin-top: -17px;
	}
}

We hope this helps!

Let us know if you need further help.

Kind Regards,

Rodrigo.

aThemes Support

That´s excellent, Rodrigo!! Thank you so much. I really appreciate all your help.
/ Lisa

Hi Rodrigo,
On the mobile version of references and cases: Referencer & Cases -
I would like the logos to to be in 2 columns, so we have 2 logos side by side in each line. Can you please help me with that?

Best regards,
Lisa

Hello Lisa,

Sure we can help!

Please try with the custom CSS code below at Appearance > Customize > Additional CSS:

@media(max-width: 767px) {
	.page-id-13 .elementor-gallery__container .elementor-gallery-item {
		position: relative !important;
		top: 0;
		left: 0 !important;
		width: 50% !important;
	}
}

We hope this helps!

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

aThemes Support

Hi Rodrigo,

It looks great, thank you very much!
However, now our cases has been moved down a lot, so you have to scroll far to reach them. Can you fix it, so the cases are just below the references with reasonable amount of whitespace.

Best regards,
Lisa

Hello Lisa,

Oh right! Please try adding the given custom CSS code below at Appearance > Customize > Additional CSS:

@media(max-width: 767px) {
	.page-id-13 .elementor-gallery__container {
		padding-bottom: 0 !important;
		margin-bottom: 0 !important;
	}

	.page-id-13 .e-gallery-masonry {
		height: auto;
	}
}

We hope this helps!

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

aThemes Support

Excellent! Thank you so much.
Best regards,
Lisa

1 Like

Hello Lisa,

You are welcome!

Let us know if you need further assistance.

Kind Regards,

Rodrigo.

aThemes Support