[bartvandriessche]

Hi,

I have a few questions regarding the settings on the home page:

1. Is it possible to change the ‘sequence’/order of the elements that are on the home page? Now, on my website you have the page slider, projects and then a text (from top to bottom). I would like to change these elements, in the following order: page slider – text – projects.

2. Is it possible to have a separate image for featured pages for responsive use (mobile devices)? Currently, the website looks properly on a laptop or desktop computer, yet on mobile devices the ‘featured images’ do not make sense at all. See attachment. You do not see any useful image.

The settings for customizer –> theme options –> featured slider –> ‘mobile display’ does not give me the right result. I would like to have a different image for mobile devices. Is this possible with a simple custom CSS code?

3. How can I remove the ‘search icon’ at the upper right corner of my screen? For my website it doesn’t make sense to have a ‘search icon’. I found several topics for this question, but the custom CSS code doesn’t work:

#search-toggle {
display: none;
}

4. I would like to delete the ‘dates’ when you hover over the project images. I just want to see the title. Is that possible?

My website is: http://studiovandriessche.nl/

Many thanks in advance.

[Skandha]

@bartvandriessche: Hello there,
1. Section Sorter, the feature to change the order sections is only available in pro version of the theme. I suggest you to upgrade to pro. You can check out the additional-features available in the theme.

2,3,4.
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

/* Slider Images in mobile view */
#feature-slider-section .post-thumbnail img {
    object-position: center center;
}

/* To hide search in header right */
#primary-search-wrapper, .mobile-social-search {
    display: none;
}

/* To hide dates when hovered over project images */
#portfolio-content-section .entry-meta {
    display: none;
}

Let me know if this works out!
Kind Regards,
Skandha

[bartvandriessche]

Hi Skandha,

Many thanks for your quick reply!

3 and 4 work perfectly! The CSS code for 2, however, doesn’t change anything. I added the CSS codes, so you can see it as well, right?

Thanks again.

[bartvandriessche]

Hi skandha,

Could you still help me out with this topic?

Many thanks.

[bartvandriessche]

Can anyone help me with this topic?

[Skandha]

@bartvandriessche: Hello there,
Sorry for the late reply.
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

@media screen and (max-width: 1024px) {
	#feature-slider-section .hentry-inner {
		height: unset;
		min-height: unset;
	}
}

Let me know if this solves the issue.
Kind Regards,
Skandha

[bartvandriessche]

Hi Skandha,

It does change something but not as I want it to be. Please have a look at the attachment how it looks (“screen with custom CSS). Everything is extremely compressed to the top of the screen, which does not look very professional.

Without the custom CSS the the image is not ‘cropped’ nicely (changing the position of the image doesn’t give me the desired result either). Because the (standard) featured images have a landscape resolution. Though, smartphones have a portrait resolution, so of course this does not work and make it not responsive at all. See image “screen without custom CSS.

I made a proposal of how I want it to look, please find it also in the attachment. Is this possible?

Perhaps you can provide me with a custom css in which the featured image for the computer screen can be different than the one for mobile devices?

Or custom css that makes it possible to decrease (scale) the size of the featured image for responsive use with a certain percentage (for example to 70% of the original size)?

I don’t know, I have no knowledge/expertise with custom css codes. But you have 🙂

I am looking forward to your reply.

[bartvandriessche]

I can’t add attachment, so I uploaded the images on a page on my website. Please find them here:

http://studiovandriessche.nl/test/

[bartvandriessche]

Hi, can anyone help me? Skandha?

[Skandha]

@bartvandriessche: Hello there,
Please try using the following CSS Code instead.

@media screen and (max-width: 1024px) {
	#feature-slider-section .hentry-inner {
		height: unset;
		min-height: 75vh;
	}
}

#feature-slider-section .post-thumbnail img {
    object-position: center center;
}

Let me know if this solves the issue.
Kind Regards,
Skandha

[bartvandriessche]

Hi Skandha,

It already is a bit better, but the images do not align in the center?

Please have a look here (if you scroll down to the forth image): http://studiovandriessche.nl/test/

[bartvandriessche]

In addition, the settings for image position in the menu “theme options –> featured slider –> mobile use” are set to “center center”. But it just does not do this.

[Skandha]

@bartvandriessche: Hello there,
Can you try clearing your browser cache and check again? At my end the center of the images is showing up on mobile devices.

Kind Regards,
Skandha

[bartvandriessche]

Hi Skandha,

I tried the website with different phones from friends. With IOS (Iphone) the images are indeed centered. Yet, with Android (Samsung and Xiaomi) they are not centered. Has this something to do with the custom css?

[Skandha]

@bartvandriessche: Hello there,
I think it is a browser cache issue. Can you check on different browsers on the same mobile device?

Kind Regards,
Skandha

[Author]

Posts