• To improve performance and better customer
    experience we are maintaining our server.
    If you are getting login issues then
    please send an email at "themehunk@gmail.com"
  • Your query is valuable for us, you can post your query any time.
    We are ON in week days. You will get instant support in our working hours.
    We are little slow in non-working hours, but you will get response in maximum 24 hours.
    Our working timing is
    [10:00 AM (IST) - 7:00 PM (IST)]
    [6:30 AM (CET)- 3:30 PM (CET)]
    [12:30 AM (EST) - 9:30 AM (EST)]

    Login Rules
    1. Premium users can login directly using aMember credentials, Created at the time of purchase.
    2. Free users can re-register to access forum using this link : Register Here.

CSS to force Featured theme mobile view position of header background image

deva

Pro Member
Pro
#1
Hello

I am struggling to identify correct CSS to force position of Featured theme background header image for small-screen devices.

The default Featured theme setting for small screens appears to display the left part of header background images.

I wish to force small screens to display either:
a) horizontally centered background header image
or
b) combination of horizontally centered and vertically bottom background header image.

Please indicate required CSS.

Thank you
 

deva

Pro Member
Pro
#3
Hi

Not an ideal example but as a guide:
the Featured theme demo at https://support.themehunk.com/wp-themes/featured/ where the section of image(s) on a small screen may not convey the site operator's desired image context:

coffee cup + man image:
default small screen display shows a lot of empty grey space and just a coffee cup, but a centered image would likely show both coffee cup and the style of the person holding it

street scene:
default small screen display has limited scene depth and suggests generally dull depressing weather, but a centered image would show maximum depth including the distant street with black cab and the reflected sun effect of a bright happy summer day.

Hope that helps understand my desire to maximise impact by targeting which section of the image to display on a small screen.

Thanks
 

Satyendraa

Moderator
Staff member
#4
Hello there,

You can change background image position using this CSS.
Go to the Customize > Additional CSS and paste this CSS

Code:
@media screen and (max-width: 1024px){
.fadein-slider .slide-item{
background-position:center;
}
}
Best Regards
 

deva

Pro Member
Pro
#5
Excellent, the stated CSS resulted in ideal central presentation on small screens.

Thank you for your prompt assistance during a weekend.