• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Making tops of photos line up in Monochrome Pro

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Making tops of photos line up in Monochrome Pro

This topic is: not resolved

Tagged: monochrome pro

  • This topic has 3 replies, 2 voices, and was last updated 4 years, 6 months ago by designerwriter.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • March 2, 2019 at 11:20 pm #489793
    designerwriter
    Member

    How do I make these 2 photos line up at the top and reduce the amount of space between the social media icon and the photo in the sidebar? Thanks in advance!

    http://griefcandorandlove.com/about/
    March 3, 2019 at 6:22 am #489797
    apgkhn
    Member

    1) To space arrangement for widget items, Because you want to keep them at the same level. So, Add this to your Custom CSS

    .sidebar .widget {margin-bottom: 70px;}

    Then,
    2) Why do not you try to add this photo (http://griefcandorandlove.com/wp-content/uploads/2019/03/About-Cindy-360x360-300x300.jpg) "as 360x360" px size. Guess, your request will take place automatically.

    3) so you do not need to touch to this ".simple-social-icons ul li" CSS code.
    hope it works.

    March 4, 2019 at 8:29 pm #489823
    designerwriter
    Member

    I tried this code...
    .sidebar .widget {
    margin-bottom: 70px;
    }

    But it didn’t work. The photo already is 360x360px. Did you mean make it 300x300px? I will change the photo to 300x300 and see if it works. BRB.

    March 4, 2019 at 9:46 pm #489824
    designerwriter
    Member

    It worked! Thank you. But I have 2 questions.

    1. Why did you have to change the bottom number when it was the top of the photos I wanted flushed and even?

    2. How do I make the space less between the photo and the social media icons so that it’s lining up with the bottom of the large photograph to the left? I inspected the element but I couldn’t see where to change the padding.

    Also, the 300x300 is the standard sidebar size correct? Then what is the size of the photo above the body? I made it 1600x800 but I wasn’t sure if that reduced to 1200 width. I might as well make it size as so it works well with the sidebar photo. This is why I am asking.

    Thanks in advance!

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble