Dynamic images for header image

multimediacontentcreator · Member · Jun 10, 2020 at 3:12 pm
Copy link

Add topic to favorites
Hello,

My website or blog has a recent header image I have added with the text embedded on the image due to the fact for some reason the font text I tried to add under my title in the theme was stuck at white and I did not see any way to change that color. I am not sure if anyone can help me as well but are colors on the site that appear around the logo and header image on top are they tied to the theme and you cant change the colors?

But this brings me to my main question. Can I create a dynamic header image because the way I have the one set up now with the text embedded on it off Photoshop shows up weird on a small device like phone. the text cuts off. I have set it up perfectly on tabelts and desktop but would like to change it to possibly a version of this header image without any text on mobile. but do not know how. I also know nothing about css code or found any way to insert it as I do not have the pan with widgets but I think the second cheapest or freelancer plan. I do not know how to even enter the css editor.

Thanks.

The blog I need help with is: (visible only to logged in users)
multimediacontentcreator · Member · Jun 10, 2020 at 3:17 pm
Copy link
Ok I found the additional css tab within the wordpress dashboard or options. I still have no idea if it will switch my entire image or just my mobile or how to enter the css to make it dynamic on small handsets.
multimediacontentcreator · Member · Jun 10, 2020 at 3:23 pm
Copy link
I also found this info asking a similar question but my thing is I would rather not have the image resize but actually have small non tablet mobile devices load a different instance of the image if possible.

https://wordpress.org/support/topic/responsive-header-image-for-mobile/

And the guide or the code the guy answering gives doesnt say where to put it exactly. Does he mean in the Additional CSS window?
multimediacontentcreator · Member · Jun 10, 2020 at 3:26 pm
Copy link
I have the premium plan I just checked by the way.
kokkieh · Staff · Jun 11, 2020 at 8:50 am
Copy link
Hi there,

We can help you with custom CSS to change the color of your site title and tagline.

For this theme you’ll use this code:
```
/* Change site title color */
.site-title a {
	color: blue;
}

/* Change tagline color */
.site-description {
	color: red;
}
```
Substitute the colors with the actual color values you want.

It’s not possible to use different images for different screen sizes, though. That would require modifying the theme’s PHP files themselves.
multimediacontentcreator · Member · Jun 11, 2020 at 11:42 am
Copy link
Thanks for this help and I will try it in a second. Now regarding the second issue of having a responsive banner that scales on portrait orientation on say an iPhone 6S all the way across (the banner or header image). Can you help me with this as well? I have tried inserting this code into the Additional CSS section and from my research it seems to be what I am looking for to no avail (meaning it did not change anything):

@media (max-width: 480px) {
.logo img {
width: 30%;
height: 45%;
}
img{
max-width:100%;
}
and (orientation: landscape
}
multimediacontentcreator · Member · Jun 11, 2020 at 11:48 am
Copy link
I meant orientation portrait not landscape up above I tried all sorts of combinations including take the “and” out.
multimediacontentcreator · Member · Jun 11, 2020 at 11:52 am
Copy link
Ive been trying this now as well to no avail:

@media only screen (max-width: 1366px) {
.page-header-image, .page-header-image-single }
img {
max-width: 100%;
max-height: 100%;
}
(orientation: portrait
}
multimediacontentcreator · Member · Jun 11, 2020 at 12:12 pm
Copy link
I even tried to implement this code in this additional css section and it doesnt seem to do anything or change anything:

@media screen and (max-width: 800px) {
#site-header {
display: none;
}
}
staff-mckluskey · Staff · Jun 11, 2020 at 1:11 pm
Copy link
This is not something we can help you with. The theme will adapt automatically to the size of the screen and the header will be cropped.

For help with anything else, remember that you can reach via live chat directly from https://wordpress.com/help/contact.
multimediacontentcreator · Member · Jun 11, 2020 at 2:00 pm
Copy link
I am just curious if its possible. I did what you suggested and will leave it as such but for future reference since photoshop and illustrator have more font options than the wordpress cms, would it be possible through the more css options code to make actual images dynamic or have one image for movile and one for deskrop? I will leave it the way it is but I am curious for future reference.
multimediacontentcreator · Member · Jun 11, 2020 at 6:42 pm
Copy link
Also last question. Can anyone explain why exactly my site becomes so responsive not just across devices but across browsers? Like comparing the way the header image crops on opera where I uploaded from to Safari? Are there fixes for that?
staff-blorbo · Staff · Jun 11, 2020 at 7:36 pm
Copy link
It’s not directly possible, no. This type of theme behavior cannot be modified by CSS.

The theme is designed to adapt to all screensizes. This particular theme crops the header images rather than scaling them.
multimediacontentcreator · Member · Jun 11, 2020 at 8:32 pm
Copy link
Thanks for the info.

No items found.