• 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 photos level 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 photos level in Monochrome Pro

This topic is: not resolved

Tagged: code, level at the top, main section, photos, Sidebar

  • This topic has 9 replies, 2 voices, and was last updated 3 years, 9 months ago by Terry.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • April 10, 2019 at 10:23 pm #490591
    designerwriter
    Member

    Hello. A while back, I asked how I can make the photos in the sidebar level with the photos on the main section. I edited the code and it worked. Now I find that the photos in the sidebar are too high and not level. I am not sure what happened if it changed with the update to the theme. How can I fix this? Do I add the code to the Additonal CSS section?

    Here is another page in addition to the original URL I supplied:

    Celestial Bodyworks

    http://griefcandorandlove.com/about/
    April 11, 2019 at 9:46 am #490607
    designerwriter
    Member

    Can someone help me please?

    April 18, 2019 at 5:27 am #490718
    Terry
    Member

    Morning,

    You can add the following code into your style.css or Customizer=>Additional CSS, depending on your comfort level.

    .sidebar {
    	padding-top: 50px;
    }
    
    @media only screen and (max-width: 1023px) {
    	.sidebar {
    	padding-top: 0;
    }
    }
    

    Victor has a great tutorial on using your browser's inspection tool that may help.

    Warm Regards,
    Terry

    April 22, 2019 at 6:38 pm #490799
    designerwriter
    Member

    Hi Terry. I am getting this error that says..“Markup is not allowed in CSS.There are 15 errors which must be fixed before you can save.” It won’t let me publish this code under Additional CSS unfortunately. What should I do now?

    I know it’s the code you posted because when I took it off, I was able to publish it so I am not sure what is wrong with that code or why I can’t publish it.

    April 23, 2019 at 6:36 am #490818
    Terry
    Member

    Hi,

    Not sure how that link got in there, it should NOT be there and is generating that error.

    Here's what it should be, sorry for the confusion...

    .sidebar {
        padding-top: 50px;
    }
     
    @media only screen and (max-width: 1023px) {
        .sidebar {
        padding-top: 0;
    }
    }
    

    I can't remove the link... try "@media only screen and..."

    April 23, 2019 at 7:35 am #490819
    designerwriter
    Member

    So should it be this Terry:

    .sidebar {
    padding-top: 50px;
    }


    @media
    only screen and (max-width: 1023px) {
    .sidebar {
    padding-top: 0;
    }
    }

    April 23, 2019 at 8:00 am #490820
    designerwriter
    Member

    Ok this worked:

    .sidebar {
    padding-top: 115px;
    }


    @media
    only screen and (max-width: 1023px) {
    .sidebar {
    padding-top: 0;
    }
    }

    I changed the 50px value to 115px and the photo moved down to be level with the other photo. Thanks for your support Terry!

    April 23, 2019 at 3:58 pm #490825
    Terry
    Member

    So glad it worked!

    Take Care,
    Terry

    April 23, 2019 at 9:33 pm #490828
    designerwriter
    Member

    Thank you Terry! Take care right back at you.

    designerwriter

    April 25, 2019 at 6:34 am #490849
    Terry
    Member

    Just testing:

    .sidebar {
        padding-top: 50px;
    }
      
    @media only screen and (max-width: 1023px) {
        .sidebar {
        padding-top: 0;
    }
    }
  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 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