Move box containing paragraph to the right

  • humayun21 · Member ·

    Hi everyone! I’m using the Entrepreneur theme, and I’d love to be able to move the box containing the “Welcome to my site!” text to the right of my site, so that I’m visible in the background image. Does anyone know how to do this? Sorry for a potentially silly – I’m new to CSS, and I’d look up the code necessary, but I don’t know what the “box” element is called. Thanks!

    The blog I need help with is: (visible only to logged in users)

  • pauloeaquino · Staff ·

    Hi Humayun,

    I had a look at your site and tweaked some code to get the following result.

    See screenshot
    https://cloudup.com/cAPlkrNFgWm

    If this is what you’re looking for, please use this code:

    @media only screen and (min-width: 800px)
#page .content-area {
    margin-left: 0;
    padding-right: 5%;
    padding-left: 19%;
}

.column {
    float: right;
}

    Also worth mentioning, all support documentation for the Entrepreneur theme can be found here:
    https://entrepreneurdemo.wordpress.com/docs/

  • humayun21 · Member ·

    Thank you so much, pauloeaquino! Is there a way to move it even farther right?

  • pauloeaquino · Staff ·

    You’re absolutely welcome :)

    Having a look back at your site, the value for the padding-right property is set a little bit above 19.6%.

    See screenshot
    https://cloudup.com/czLm_QPdsrt

    If you look in the screenshot, that green area is all the padding being applied to the right side of box, so you’ll need to be sure to adjust that.

    The code I used to move it further to the right is included in my reply from above. I adjusted the padding-right to 5% and the padding left to 19%. Basically, I flip-flopped the original values. And the reason why I added a padding left is because without it, the box seems to widen.

    Anyways, you can certainly play around with these numbers to achieve the specific look you want.

    But definitely double-check you included that code in your CSS.

  • humayun21 · Member ·

    Thanks again! I played around with the values and found the appearance I like using CSS in Chrome, but for some reason, when I input the code into the customized CSS space on WordPress, it doesn’t register – when I go back to the customizer, it leaves the padding and margin stuff out of the content-area section you showed me, and the site doesn’t change. I’m wondering if it will update eventually, or if I’m doing something wrong.

  • pauloeaquino · Staff ·

    when I go back to the customizer, it leaves the padding and margin stuff out of the content-area section you showed me, and the site doesn’t change.

    Hmm, that is definitely a little strange indeed considering that you have managed to float the box to the right using the code I gave you, but it leaves out the other code.

    Some problems like this when a small adjustment or change is made to a site, the browser fails to recognize the change and simply reloads the exact same page. A good first step towards a solution is to clear your browser’s cache, so at this point, I would try doing that. Reload your page and try inputting the code again.

    For Chrome, instructions on how to do that can be found here:
    https://support.google.com/chrome/answer/2392709?hl=en&visit_id=1-636425941201677575-921547739&rd=1

    In the meantime, let me look into this for you as I’m very curious myself as to what could be causing this issue.

    I’ll also add a modlook tag in the sidebar to see if staff could chime in on any insights for what the issue could be.

  • garysixtyeight · Member ·

    when I go back to the customizer, it leaves the padding and margin stuff out of the content-area section you showed me, and the site doesn’t change.

    I replied to this in the separate thread you created at:

    https://en.forums.wordpress.com/topic/force-css-changes-to-go-live-right-away?replies=2

    There are brackets missing from the CSS media query that was posted earlier in this thread.

    Although the incorrect CSS may initially appear to work, it doesn’t once it’s saved because it goes through a minifier (to reduce the CSS size) before it’s added to the header.

    When there are syntax errors in the CSS, it may cause the minifier library to strip out some stuff.

  • pauloeaquino · Staff ·

    Thanks @garysixtyeight for pointing that out! I didn’t realize that missing set of brackets was the cause. Definitely learned something new today, thank you!

  • garysixtyeight · Member ·

    You’re welcome :)

  • humayun21 · Member ·

    Thanks very much, both! This helped a ton, and everything is working now.

  • The topic ‘Move box containing paragraph to the right’ is closed to new replies.