Footer - only one picture above full width

Hello,

I have a second question, my older thread is already colsed...so I post a new one.

I need ony one picture in the footer above the full page width (instead of 3 small pictures),
See my attached file "Markenboard_Ansicht.png".

How can I do that?

Tank you!

 

Hello,

Go to sidebar-footer.php present in your theme directory and follow the instruction as shown in image given below

 

Great! Thanks!

 

It works. But then on a Smarthpone the scale factor of the footer image is not correct.
It´s squeezed together.

Can I fix that?
Size of my Footer image: 987px x 299px

 

Here you can see the footer picture, in the mobile view.
It looks not so nice

Hope you can help me!

Thanks!

 

Hello,

Image is behaving normally because if we see an image of 987px x 299px in a mobile that is 480px. Then it will look as it is looking on your site.
You can create one more image with portrait dimension. And use it for mobile view.

I think you are using text widget for adding footer image.
If yes then add image in format given below.

Code:

<div class="pc-img"><img src="current image address"></div>
<div class="mob-img"><img src="portrait image address"></div>

After that paste this code in Custom CSS
Appearance > Theme Option > Styling Option > Custom CSS

Code:

@media only screen and (max-width: 480px){
.pc-img{
display:none;
}
.mob-img{
display:run-in!important;
}}
.mob-img{
display:none;
}

 

Hi Nitesh,

your CSS is now in custom CSS.

But where I should put in the div code?
Code:
<div class="pc-img"><img src="current image address"></div>
<div class="mob-img"><img src="portrait image address"></div>

For adding the footer image I go to > Design > Widgets
There I am using the "Image Widget" and put that in the "First footer Widget Area" (see screenshot)

I am using the image attached on this comment. ("footer_image_big.png")


thank you for your help!

 

Should I generate a second footer image?
Where I give then the Info, which browser/device should use the big image, and which should use the small image?

With what measurements should the picture exactly have (for smartphone)?
And can I use that then for tablet & for smartphone? Is that the same behavior?

Thanks!!

 

Hello,

Could you please share us your website link.

 

http://www.kaufhaus-juhasz.de/

 

If you need I could send you the access for the Wordpress Backend too.

If you like them, I would send them per pn/message to you. Not public in these thread.

Thank you!

 

Hello,

There are many media devices available in the market of different dimension.
You can use the portrait image of dimension 271 x 82 pixels for the standard dimension of smart phone.

Go to the Appearance > Widgets panel in your dashboard and drag & drop the text widget in the Footer Widget Area
and then paste the code given below in the content section of text widget.

Code:

<div class="pc-img"><img src="Enter current image URL address here"></div>
<div class="mob-img"><img src="Enter the portrait image URL address here" ></div>

See the image for reference.


After that paste the code given below in Custom CSS section
Appearance > Theme Option > Styling Option > Custom CSS

Code:

.mob-img{
display:none;
}
 
@media only screen and (max-width: 480px){
.pc-img{
display:none;
}
.mob-img{
display:run-in!important;
}}

See the link for more details
1). http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml
2). http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

I hope this will help you.

 

Thank you! Now I got it

It works fine!