8 {{ upvoteCount | shortNum }}
8 {{ upvoteCount | shortNum }}

Problem with Alignment HTML

by Krishna876
7 replies
  • WEB DESIGN
    • |
I recently started on a site but I'm having some alignment issues. I've been using chrome's "inspect element" to try to figure out the problem. I think I see where the problem is, but I cant figure out the path to the file I need to adjust..

Hoping someone more skillful than I am with html can help me to figure out the problem..

Here is the site >> Blue Hole Ocho Rios

If you look below the main slider, you'll see 3 images. The 3rd has fallen to a new line for some reason.

Can anyone tell me how to get it back up so that all images are in 1 row? Which file should I edit?

Thanks...
#alginment #alignment #html #problem
  • Profile picture of the author venfrancis
    it's working fine in firefox and chrome. The problem that i'm seeing is the shadow below the slider, when the new slide is rendered, the shadow displayed "none" immediately.
    Signature

    UI/UX Designer + Frontend Developer from Philippines | ven.revereasia.com

    {{ DiscussionBoard.errors[9451974].message }}
  • Profile picture of the author Krishna876
    The shadow is another problem I'll have to deal with.. But for now, do you see how the smaller images below the slider are not in one row? In my browsers, it shows as 2 in a row, then the 3rd drops to the next line.. That's what I'm trying to fix...
    Signature
    http://things-to-do-in-jamaica.com
    {{ DiscussionBoard.errors[9453945].message }}
    • Profile picture of the author pomodorium
      As I am seeing the site is not responsive, so this would be a fix, wrap the image in this code
      HTML Code:
      <div style="position: relative;top: -250px; left: 655px;"></div>
      {{ DiscussionBoard.errors[9454229].message }}
    • Profile picture of the author venfrancis
      Originally Posted by Krishna876 View Post

      The shadow is another problem I'll have to deal with.. But for now, do you see how the smaller images below the slider are not in one row? In my browsers, it shows as 2 in a row, then the 3rd drops to the next line.. That's what I'm trying to fix...

      about your problem, if you're using a theme with an option to hide the sidebar, just hide it. Because currently, the sidebar is displayed in the homepage template and it is taking the space in the right portion. If not, follow these:

      in your stylesheet

      Code:
      .home #content > #main{width: 100% !important;}
.home #content > #main > .fix {display:none !important;}
.home #content > #main > .post{margin: 0px 20px 20px 0px;}
.home #content > #main > .post:last-child{margin: 0 0px 20px 0px !important;}
      The code above will only target the elements you want in the homepage, so nothing to worry on the rest of the pages. Also, i do not recommend giving it a positioning fix because it will conflict the rest of the element you'll put after it through a dynamic sidebar/content container. Should work
      Signature

      UI/UX Designer + Frontend Developer from Philippines | ven.revereasia.com

      {{ DiscussionBoard.errors[9454320].message }}
      • Profile picture of the author Krishna876
        Thank you. Problem solved...

        Originally Posted by venfrancis View Post

        about your problem, if you're using a theme with an option to hide the sidebar, just hide it. Because currently, the sidebar is displayed in the homepage template and it is taking the space in the right portion. If not, follow these:

        in your stylesheet

        Code:
        .home #content > #main{width: 100% !important;}
.home #content > #main > .fix {display:none !important;}
.home #content > #main > .post{margin: 0px 20px 20px 0px;}
.home #content > #main > .post:last-child{margin: 0 0px 20px 0px !important;}
        The code above will only target the elements you want in the homepage, so nothing to worry on the rest of the pages. Also, i do not recommend giving it a positioning fix because it will conflict the rest of the element you'll put after it through a dynamic sidebar/content container. Should work
        Signature
        http://things-to-do-in-jamaica.com
        {{ DiscussionBoard.errors[9454940].message }}
  • Profile picture of the author alrenpages
    Originally Posted by Krishna876 View Post

    I recently started on a site but I'm having some alignment issues. I've been using chrome's "inspect element" to try to figure out the problem. I think I see where the problem is, but I cant figure out the path to the file I need to adjust..

    Hoping someone more skillful than I am with html can help me to figure out the problem..

    Here is the site >> Blue Hole Ocho Rios

    If you look below the main slider, you'll see 3 images. The 3rd has fallen to a new line for some reason.

    Can anyone tell me how to get it back up so that all images are in 1 row? Which file should I edit?

    Thanks...
    I am not sure what code you are using... if you are using css in a separate file you can edit it in that file or follow what (pomodorium) have suggested.
    Signature

    My Book which is sold and listed in the Best Seller Books on Amazon The POWER of 5 To Make You RICH | Making 5K into 20M + in 10 Years.

    {{ DiscussionBoard.errors[9454256].message }}
  • Profile picture of the author rafihsu
    I agree with pomodorium. Another alternative with the div code he shared is adding the CSS for that specific image/box.

    Code:
    .post-38.infobox.type-infobox.status-publish.hentry.post.block {
position: relative;
top: -250px;
left: 655px;
}
    {{ DiscussionBoard.errors[9454282].message }}

Trending Topics