Centering text, spacing images and iPhone

Discussion in 'Real Photography WordPress Theme' started by jorgegarcia, Jan 15, 2014.

  1. jorgegarcia

    jorgegarcia New Member

    Joined:
    Jan 2, 2014
    Messages:
    22
    Likes Received:
    0
    Hello, here is my link. blog.jorgegarciaphotography.com. Here are my issues.
    I want to upload my horizontal images at 706px x 471px and verticals at 351px x 471px. Is my math incorrect? The spacing between the two verticals differ from the space above them. I prefer all images to have the same space that is above the verticals. I also want the text to fill in the width of the horizontal images. I currently placed the following code.
    p {
    margin-top:20px;
    margin-bottom:50px;
    margin-right:120px;
    margin-left:120px;
    }
    But now my copyright has shifted right. Please help.

    Thank you! Screen shot 2014-01-15 at 9.46.23 AM.png View attachment 3222
     
  2. jorgegarcia

    jorgegarcia New Member

    Joined:
    Jan 2, 2014
    Messages:
    22
    Likes Received:
    0
    Also, on the iPhone it can't be viewed correctly. from iphone.png
     
  3. jorgegarcia

    jorgegarcia New Member

    Joined:
    Jan 2, 2014
    Messages:
    22
    Likes Received:
    0
  4. Piyush

    Piyush Support Staff

    Joined:
    Dec 8, 2012
    Messages:
    4,745
    Likes Received:
    107
    Hello,

    You have added br tag (<br>) in between your horizontal and vertical images
    but not added in other post that's why they are looking different.

    For iPhone issue, paste the code given below in Custom CSS section
    (Appearance -> Theme Options -> Styling Options -> Custom CSS) of your dashboard.

    Code:
    @media only screen and (max-width: 480px) {
    p {
    margin-right:20px;
    margin-left:20px;
    }
    }
    @media only screen and (min-width: 480px) and (max-width: 767px) {
    p {
    margin-right:20px;
    margin-left:20px;
    }
    }
    
     
  5. jorgegarcia

    jorgegarcia New Member

    Joined:
    Jan 2, 2014
    Messages:
    22
    Likes Received:
    0
    Thank you for the response. I don't see or remember entering a <br> tag. Is it being inherited from the following p style I added to the custom CSS window?
    p {
    margin-top:20px;
    margin-bottom:50px;
    margin-right:120px;
    margin-left:120px;
    }
    I want all my posts to look like this one. http://blog.jorgegarciaphotography.com/another-test-page/, but without the big space between the horizontal and the verticals. How can I make it even? Please advice. Thank you!
     
  6. jorgegarcia

    jorgegarcia New Member

    Joined:
    Jan 2, 2014
    Messages:
    22
    Likes Received:
    0
    OK, thank you! You were correct. I hope this is my last question for awhile. I only want to see posted date and posted by on my site. Please advice.
     
  7. Gourav

    Gourav Support Staff

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

    Hello,

    Paste this code in Custom CSS
    Appearance > Theme Option > Styling Option > Custom CSS

    Code:
     li.post_category {
    display: none!important;
    }
    li.postc_comment {
    display: none!important;
    }
    

    This will solve your issue.



    Thanks & Regards
    Gourav Shrivastava
     
  8. jorgegarcia

    jorgegarcia New Member

    Joined:
    Jan 2, 2014
    Messages:
    22
    Likes Received:
    0
    I'm sorry but the code given above did not work.
    Also, I would like to create a page with the heading WEBSITE that will link to my website from the Wordpress blog. Thank you and have a great day.
     
  9. Harmeet

    Harmeet Support Staff

    Joined:
    Oct 19, 2012
    Messages:
    360
    Likes Received:
    15
    Hello,

    Paste this code in Custom CSS
    Appearance > Theme Option > Styling Option > Custom CSS

    Code:
    .post_category {
    display: none!important;
    }
     
    .postc_comment {
    display: none!important;
    }
    It will remove Posted By and Posted Date.

    And for your second issue just create a page with name "WEBSITE " and paste its link to WordPress Blog. Whenever any pone click on that link it will be redirected to that page.

    Thanks & Warm Regards
    Harmeet Singh
    InkThemes.com
     
  10. jorgegarcia

    jorgegarcia New Member

    Joined:
    Jan 2, 2014
    Messages:
    22
    Likes Received:
    0
    The code only works for the iPhone. However I can still see it on a web browser on a computer and iPad.
    For the other issue, I want users to click on the page "website" and be redirected to a new site.
    Thank you for your help.
     
  11. Piyush

    Piyush Support Staff

    Joined:
    Dec 8, 2012
    Messages:
    4,745
    Likes Received:
    107
    Hello,

    For this issue,
    Go to the Appearance -> Theme Options -> Styling Options -> Custom CSS section of your dashboard
    and put the closing curly braces i.e "}" as instructed in the image given below.

    [​IMG]


    This will make the code to work for all devices.


    For this issue you can create custom menu.
    Go to the Appearance > Menus panel in your dashboard and create custom link as instructed in the image given below.

    [​IMG]

    This will solve your issue.
     
  12. jorgegarcia

    jorgegarcia New Member

    Joined:
    Jan 2, 2014
    Messages:
    22
    Likes Received:
    0
    Amazing! It's looking great! On mobile devices however, when viewing pictures they are not directly under one another. I guess this is because some vertical pictures are aligned right and some aligned left. Can this be fixed only for mobile devices? Thank you soooo much!
     
  13. Nitesh

    Nitesh Support Staff

    Joined:
    Oct 19, 2012
    Messages:
    5,165
    Likes Received:
    160
    Hello,

    Paste this code in Custom CSS
    Appearance > Theme Option > Styling Option > Custom CSS

    Code:
    @media only screen and (max-width: 480px){
    .content-bar .post img {
    width: 100%!important;
    }}
    Thanks & Regards
    Nitesh Raghuwanshi
     
  14. jorgegarcia

    jorgegarcia New Member

    Joined:
    Jan 2, 2014
    Messages:
    22
    Likes Received:
    0
    Hello Nitesh, This seems to have solved the issue on the iPhone when viewed in vertical position. When viewed horizontal position on the iPhone the pictures look staggered.
    The site looks great on the iPad when viewed in horizontal position but when viewed in vertical position on the iPad it is staggered. Thank you very much!!
     
  15. Piyush

    Piyush Support Staff

    Joined:
    Dec 8, 2012
    Messages:
    4,745
    Likes Received:
    107
    Hello,

    Paste the code given below also in Custom CSS section
    (Appearance -> Theme Options -> Styling Options -> Custom CSS) of your dashboard.

    Code:
    @media only screen and (max-width: 767px) and (min-width: 480px){
    .content-bar .post img {
    width: 100%!important;
    }
    }
    @media only screen and (max-width: 959px) and (min-width: 768px){
    .content-bar .post img {
    width: 100%!important;
    }
    }
     
    This will solve your issue.
     
  16. jorgegarcia

    jorgegarcia New Member

    Joined:
    Jan 2, 2014
    Messages:
    22
    Likes Received:
    0
    I have uploaded two pictures to show how they look in mobile devices. One is iPad in vertical view. iPad horizontal view is good.
    The second picture is iPhone in horizontal view. iPhone in vertical view is good. ipad_vert_view.png iphone_horiz_view.png ipad_vert_view.png iphone_horiz_view.png
     
  17. Piyush

    Piyush Support Staff

    Joined:
    Dec 8, 2012
    Messages:
    4,745
    Likes Received:
    107
  18. Piyush

    Piyush Support Staff

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

Share This Page