Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Moving Content To The Right…

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 27 total)
  • Author
    Posts
  • #163972

    I’m having a bit of trouble figuring out how to do what I’d like to do on my site… I have some content that I would like to move to the right. An example is on this page: http://jeffsingerphotography.com/portfolios/two/poz-magazine-sapna-mysoor

    Down toward the bottom left there is text about the image, “navigation dots” and “show thumbnails”. Every page that has a full sized image has this information. I would like it to be more centered in the black sidebar, so I’d like to move all that information to the right 10-15 pixels (I’d need to play with it to get the location just right).

    How would I do that?

    Thanks!

    #163974
    Atelierbram
    Participant

    Do you know how to use webdev-tools on Chrome , or Firebug? You can target that #topNav that’s inside this header-wrapper that becomes a sidebar on larger screens.

    @media only screen and (min-width: 700px) {     
      #topNav { 
         margin-left: 1em; 
      } 
    }
    
    @media only screen and (max-width: 800px) { 
      #topNav {
       margin-left: 0; 
      }
    }
    
    #163977

    Not knowing exactly what I’m looking at, #topNav seems to be more global than I would like. There are four different elements that I would like to move (using Safari’s developer inspector):
    div.image-title
    div.image-desc
    div#dotControls.gallery-controls
    div.thumbnail-toggle

    But I don’t know the proper way to move those elements within the sidebar.

    Thanks!

    #163978
    Atelierbram
    Participant

    Yes, I see what you mean, you can move that .meta block by increasing the value for left, it’s at 25px, here I changed it to 50px:

    .collection-type-gallery .meta {
     position: absolute;
     left: 50px;
     bottom: 25px;
     width: 175px;
     z-index: 999;
    }
    
    #163979

    I’m glad you know what you’re doing, because to me when I looked up .collection-type-gallery with the Safari inspector it looked like that was the entire page being moved… I have no clue how that only effected the bottom elements like I wanted, but it did it.

    Thanks!

    #163980
    Atelierbram
    Participant

    Glad to be able to help. Have been using Chrome webdevtools for some time now, but right now I tried to do inspect element in Safari inspector, and failed to even get to that part that was so easy to grab in Chrome, so I don’t know, …

    #163981

    Since we’re moving things, maybe this will be just as easy for you… I actually wouldn’t mind the “social icons” to be moved up so they are closer to the last sidebar option “pdf portfolio”. I can see that their block is called
    div#footerBlocks-2.social.links

    Would it be something similar to what you did for the other items?

    #163982
    Atelierbram
    Participant

    When you do negative -6em it’s hitting it, right now it’s at 0, so something like:

    .social-links {
      margin-top: -3em;
     }
    
    #163985

    Perfect.. Thanks again!

    #164304

    I just noticed something that the .social-links modification did… the links no longer work.

    I was told by someone visiting my site that the links don’t work in Safari and Chrome, but they do work in Firefox.

    How can I get the links working again while keeping the spacing adjustment that was made?

    Thanks!

    #164331
    Atelierbram
    Participant
    .sqs-layout {
      display: none;
     }
    .social-links {
      margin-top: 2em;
     }
    

    Just before .social-links is this empty div (with nested grid-divs )+ non-breaking space: .sqs-layout or#headerBlocks , not styled in CSS as far as I can see, and blocks the links, for it sits on top of it now. Should be good now.

    #166180

    So, I just noticed that one of the links above the social links isn’t work. The “PDF Portfolio link isn’t working. And, if I remove the “PDF Portfolio” link, then the “Prints” link won’t work.

    Update:
    Well after I removed and then put back in the “PDF Portfolio” link, the spacing between those three items is messed up… they should be closer together and not have so much space between them. And, I noticed that the “PDF Portfolio” link is actually there, but it’s just above the text.

    Any ideas?

    Thanks!

    #169914

    I missed the reply to this one…

    So as an update, I’ve changed some things around on my sidebar. No matter what the last link on the side bar is (just above the social icons), the link doesn’t work. Right now I have “PRINTS” as the list item and it’s URL isn’t working.

    Shaneisme, sadly, I don’t know what you’re talking about. All my custom css has been hodge-podged together based on recommendations here so I have little knowledge of CSS and coding (enough to look at the code, guess what it means and then make some changes that may be right or wrong).

    I actually don’t know where #topNav and .sqs-layout are since they don’t show up in my “custom css” box on squarespace. What would I have to add to my custom css box to make it so the last item’s link works properly?

    Thanks!

    #169928

    And, I just noticed that this is only happening in Safari that I can see. Firefox and Chrome seem to be fine.

    #169936
    shaneisme
    Participant

    OK, here’s a bit more detail.

    In your site.css file, you had the class .sqs-layout with a negative margin-top to move things up closely to #topNav.

    If you remove that, and place the links you’ve removed back in, I bet ya it will work.

    What I would do is remove the <div class="sqs-layout sqs-grid-1 columns-1"> altogether. Then you can adjust the distance between those links and your social icons with adding more margin-bottom to your #topNav element.

Viewing 15 posts - 1 through 15 (of 27 total)
  • You must be logged in to reply to this topic.