[Solved] Moving Content To The Right…

[Historical Forums User]

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!

[Atelierbram]

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; 
  }
}

[Historical Forums User]

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!

[Atelierbram]

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;
}

[Historical Forums User]

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!

[Atelierbram]

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, …

[Historical Forums User]

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?

[Atelierbram]

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

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

[Historical Forums User]

Perfect.. Thanks again!

[Historical Forums User]

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!

[Atelierbram]

.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.

[Historical Forums User]

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!

[Historical Forums User]

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!

[Historical Forums User]

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

[shaneisme]

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.

[Author]

Posts