Footer - only one picture above full width

Discussion in 'Cloriato WordPress Theme' started by mwnow, Sep 25, 2013.

Thread Status:
Not open for further replies.
  1. mwnow

    mwnow Member

    Joined:
    Sep 23, 2013
    Messages:
    82
    Likes Received:
    3
    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!




     

    Attached Files:

  2. Gourav

    Gourav Support Staff

    Joined:
    Oct 19, 2012
    Messages:
    7,728
    Likes Received:
    207
    Hello,

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

    2013-09-25_1724.png
     
  3. mwnow

    mwnow Member

    Joined:
    Sep 23, 2013
    Messages:
    82
    Likes Received:
    3
    Great! Thanks!
     
  4. mwnow

    mwnow Member

    Joined:
    Sep 23, 2013
    Messages:
    82
    Likes Received:
    3
    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
     
  5. mwnow

    mwnow Member

    Joined:
    Sep 23, 2013
    Messages:
    82
    Likes Received:
    3
    Here you can see the footer picture, in the mobile view.
    It looks not so nice ;)

    Hope you can help me!

    Thanks!
     

    Attached Files:

  6. Nitesh

    Nitesh Support Staff

    Joined:
    Oct 19, 2012
    Messages:
    5,165
    Likes Received:
    160
    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;
    }
     
  7. mwnow

    mwnow Member

    Joined:
    Sep 23, 2013
    Messages:
    82
    Likes Received:
    3
    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!
     

    Attached Files:

  8. mwnow

    mwnow Member

    Joined:
    Sep 23, 2013
    Messages:
    82
    Likes Received:
    3
    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!!
     
  9. Piyush

    Piyush Support Staff

    Joined:
    Dec 8, 2012
    Messages:
    4,745
    Likes Received:
    107
  10. mwnow

    mwnow Member

    Joined:
    Sep 23, 2013
    Messages:
    82
    Likes Received:
    3
  11. mwnow

    mwnow Member

    Joined:
    Sep 23, 2013
    Messages:
    82
    Likes Received:
    3
    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!
     
  12. Piyush

    Piyush Support Staff

    Joined:
    Dec 8, 2012
    Messages:
    4,745
    Likes Received:
    107
    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.
    [​IMG]

    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.
     
  13. mwnow

    mwnow Member

    Joined:
    Sep 23, 2013
    Messages:
    82
    Likes Received:
    3
    Thank you! Now I got it :)

    It works fine!
     
Thread Status:
Not open for further replies.

Share This Page