WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Theme: Forever - Leave a Comment text boxes are not aligned (13 posts)

  1. xsimplyexposedd
    Member
    Posted 7 months ago #

    I'm pretty new to WP and html and all that in general, so it is driving me crazy that I can't figure out how to fix the text boxes in the Leave a Comment area for my posts. The boxes and text beside it (e.g.: Name, Email...) are all wonky and out of place.

    I'm using the most current theme of Forever right now and I just can't figure out how to fix this!

    If someone could please help, it would be so appreciated!!

  2. Andrew
    Forum moderator
    Posted 7 months ago #

    Let's see your site

  3. xsimplyexposedd
    Member
    Posted 7 months ago #

    You can take a look to see exactly what I mean

    http://www.simplyexposedd.com/?p=70

  4. Andrew
    Forum moderator
    Posted 7 months ago #

    If you're not using a Child Theme, and if the theme doesn't have a designated section of the dashboard for CSS modifications then install this Custom CSS Manager plugin http://wordpress.org/plugins/custom-css-manager-plugin

    Then use its "CSS Code" section of the dashboard to hold your CSS modifications:

    Alternatively use your Child Theme style.css file to hold your CSS modifications:

    #respond p {
        overflow: hidden;
    }
  5. xsimplyexposedd
    Member
    Posted 7 months ago #

    I'm not sure if I'm using a child theme or not... lol sorry! so new at this! I find it odd that it was like that without me editing any html for that part of my website.

    Is there any way to edit this in my style.css or am I only able to do so through the solution you provided?

  6. Andrew
    Forum moderator
    Posted 7 months ago #

    Sorry I'm not familiar with your theme to know if it has a section of the dashboard where you can add your CSS modifications. In general you should avoid modifying the theme's files.

  7. xsimplyexposedd
    Member
    Posted 7 months ago #

    Okay... I'll try that...

    But I'm open to any other suggestions on how to fix this, just in case that won't work.

  8. .
    Member
    Posted 7 months ago #

    WordPress has an official plugin call Jetpack. It has many features, one of which is allowing you to add custom CSS without a child-theme, unless Appearance --> Edit CSS.

    Generally we should avoid using too many plugins, though, so only use it if it's necessary.

  9. xsimplyexposedd
    Member
    Posted 7 months ago #

    I got it to work through Custom CSS Manager, but now it's all on top of each other and not spaced out nicely...

    This is what mine looks like:

    http://www.simplyexposedd.com/?p=70

    & this is what it's supposed to look like:

    http://wp-themes.com/?p=14

  10. MULTIDOTS
    Member
    Posted 7 months ago #

    Please put the below code in your current theme style.css(/wp-content/themes/forever/style.css) file.

    open your style.css (/wp-content/themes/forever/style.css) and go to line no 1280 and update below style

    #respond p {
      float: left;
      margin-bottom: 10px;
      position: relative;
      width: 100%;
    }

    add below style

    #respond p label {
      float: left;
      width: 100%;
    }

    find and edit below style

    #respond input[type="text"] {
      float: left;
      margin-right: 0.5em;
      width: 100%;
    }
    .comment-form-comment label {
      /*display: none;*/
    }
    #respond textarea {
      /*margin-bottom: -1.2em;*/
      width: 100%;
    }

    Thanks!

  11. Andrew
    Forum moderator
    Posted 7 months ago #

    @MULTIDOTS, why recommend editing the theme's files when she has a Custom CSS plugin?

  12. MULTIDOTS
    Member
    Posted 7 months ago #

    Hello,

    If you don't wont to edit style.css then please put the below css on your custom css plugin

    #respond p {
      float: left;
      margin-bottom: 10px;
      width: 100%;
    }
    
    #respond p label {
      float: left;
      width: 100%;
    }
    
    #respond input[type="text"] {
        float: left;
        margin-right: 0 !important;
        width: 100%;
    }
    .comment-form-comment label {
        display: block !important;
    }
    
    #respond textarea {
        margin-bottom: 0 !important;
        width: 100%;
    }

    Thanks!

  13. xsimplyexposedd
    Member
    Posted 7 months ago #

    Ahhhh yes!!! It worked!!! Thank you so much!!! :) You all were really helpful!!

Reply

You must log in to post.

About this Topic