Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • October 14, 2014 at 3:15 pm #335604
    mike.rav

    Hello,

    I followed the example here (https://kriesi.at/support/topic/adding-a-logoimage-to-the-right-of-the-header/) and i managed to add my image correctly.

    I want to know if it possible when i shrink the browser for that image to change when reaching responsive sizes; ie my image has some text in it, which could be replaced with an image with no text.

    Thanks in advance.

    October 15, 2014 at 3:59 am #335894
    Ismael

    Hi george!

    Thank you for using Enfold.

    Apply the custom image as background on the custom div:

    echo "<div class='header-custom-image'></div>";

    Add this on Quick CSS or custom.css:

    .header-custom-image {
display: block;
width: 100px;
height: 50px;
background: url(IMAGE URI HERE);
}

    After that, use css media queries to change the background image on smaller screen sizes.

    Best regards,
    Ismael

    October 15, 2014 at 7:46 am #335974
    mike.rav

    thanks for the response.

    you mean something like this?

    @media screen and (max-width: 487px) {
    display: block;
    width: 100px;
    height: 50px;
    background: url(SECOND IMAGE URI HERE);
    }

    @media screen and (max-width: 700px) {
    display: block;
    width: 100px;
    height: 50px;
    background: url(SECOND IMAGE URI HERE);
    }

    October 19, 2014 at 6:16 am #337881
    Josue

    Hey!

    Yes, the actual code should be like this:

    
/* Mobile */
@media screen and (max-width: 487px) {
	.header-custom-image {
		display: block;
		width: 100px;
		height: 50px;
		background: url(SECOND IMAGE URI HERE);
	}
}
/* Tablets */
@media screen and (max-width: 767px) {
	.header-custom-image {
		display: block;
		width: 100px;
		height: 50px;
		background: url(SECOND IMAGE URI HERE);	
	}
}

    Cheers!
    Josue

    October 20, 2014 at 7:34 am #338151
    mike.rav

    thank for all the help

    October 20, 2014 at 9:09 am #338204
    Josue

    You are welcome, glad we could help :)

    Regards,
    Josue

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Replacing image when responsive.’ is closed to new replies.