Empty space between header and main body

cgguido

Hi everyone,

Any idea how to change the amount of space between the header and the breadcrum in this page?

http://photo.gcianci.com/Stories

or

http://photo.gcianci.com/Stories/The-Chicago-Blizzard-of-2011/

I cannot figure it out. Using Chrome's dev tools, I thought I had narrowed it down to something like:

.sm-page-layout .sm-page-layout-typetemplate .sm-page-layout-smugtemplate .sm-page-layout-full{
margin: 10px 60px 48px;
}


But that has no effect. :help :

Any help would be much appreciated!

G

cgguido

Woa! found it! it was right under my nose all along. For anybody else who's interested:

Customize>Galleries>Layout>Top Margin

boom!

G

DLRfoto

I've been looking at something similar by trying to override the 'px' values to '%' in the css of the body of the homepage. Basically, I want to control the top margin of the body of only the homepage. I've looked through the many of the archives of this fine board, but to no avail.

I've tried the firebug dev tool and found the string of html that controls that element, but it seems that there is inline css. Can this be overridden through the available CSS feature in the themes tab?

Thanks in advance for any help!

Frank

leftquark

Hi Frank,
Excellent question! Using the Firebug Dev Tools is a great way to figure out which code you need to over-ride. You can experiment with the CSS using the tool and then copy the code to place into your theme's CSS section (or in a CSS content block). Just remember to attach "!important" to the end ... this forces it to over-ride. For example:

.divTest { margin-left: 10px; }

Should become:

.divTest { margin-left: 10% !important; }

DLRfoto

Thanks leftquark! I feel like I am ever so close, but still no signs of the stubborn element budging. Here's what I see from firebug:

<div id="yui_3_8_0_1_1414527127569_458" class="sm-page-layout sm-page-layout-typetemplate sm-page-layout-full" data-pinned-region="Header" style="margin: 450px auto 0px;max-width: 960px;">

And this is what I am trying to use to override it:

.sm-page-layout .sm-page-layout-typetemplate .sm-page-layout-full {
    margin-top: 25% !important;
      
}

<img src="https://us.v-cdn.net/6029383/emoji/headscratch.gif&quot; border="0" alt="" >

Allen

I don't think you can use a percentage in this. Makes no sense, percentage of what?

DLRfoto

Thanks Allen. Allow me to clarify.
On my homepage, I am trying to configure the top margin of the body element. However, given the constraint by the interface of SmugMug's customization tool, I am only able to adjust said margin by units of pixels but would like to use a percentage (see previous post). Turning to the Firebug dev tool, I have pin-pointed the string of html (again, in previous post) and am trying to override its inline css.

leftquark

DLRfoto wrote: »

Thanks Allen. Allow me to clarify.
On my homepage, I am trying to configure the top margin of the body element. However, given the constraint by the interface of SmugMug's customization tool, I am only able to adjust said margin by units of pixels but would like to use a percentage (see previous post). Turning to the Firebug dev tool, I have pin-pointed the string of html (again, in previous post) and am trying to override its inline css.

If you give us a link to your site and some more description of what you're trying to do we might be able to help? Typically using %'s for height can lead to some issues as the height of screens tends to vary. 10% of a 1,000 pixels is 100 pixels and an image might fit. But 10% of a 400 pixel screen is only 40 pixels, and you might end up with a really teeny image or it might get cut off.

DLRfoto

Ah - I think I know what the confusion is, so I will instead post an image as I have not yet published my site as of yet. (want to make sure everything is in place before going live with it

What I would like is for the top margin of the body content block to adjust to the height of the browser window.

http://s21.postimg.org/i59e2bz6f/Screen_Shot_2014_10_29_at_2_52_05_PM.png

SmugSam

Hi Frank,

Sorry I am still not 100% clear from that photo - are you trying to get that block in the middle of the page with the logo on it up near (or alongside) the header bar? If so, it's not just a matter of dragging on the crosshairs on the little blue tool bar on the block and moving it up closer to the header? Or have I completely misunderstood!

Whilst you can specify margins in %, I'm not sure that won't cause you other issues, as from what I understand it calculates that % based on the width of the container the element is in, so on different browsers/devices you may get unexpected results. But I've never tried it, so can't speak from certainty!

DLRfoto

Apologies for confusion, and I do highly appreciate all the input thus far, however, this image (along with specs) should illustrate what I am trying to accomplish exactly. Note, I am modifying the Sierra theme.


http://postimg.org/image/ldun86gkj/

SmugSam

Thanks Frank, now I get it!

I am not sure why the code you are trying, after leftquark's suggestion, is not working though. I just tried adding the following into a CSS block on one of my pages and it took effect:

.sm-page-layout. sm-page-layout-full {
margin-top: 25%!important;
}

If you look in the inspector afterwards, can you see your code in there?

Also - as leftquark said (and I accidentally repeated) using a % for margins may give unexpected results in different browsers/devices. Are you trying to position that content somewhere in then middle of your page? There may be another way if so.

DLRfoto

Ah yes, the mighty visual specs always speaks truths lol!

Thank you Sam, and YES! If I could locate the media queries for the responsive codes, I would have the logo portion (dlrfoto) within the body content block display hidden for both tablet and mobile devices.

But for now, I would like the box showing up the bottom third of all the desktop browsers.

SmugSam

A couple of thoughts/questions Frank, to see if we can't get you there!

Margin % issue

• Have you tried again using the code I suggested above? It worked for me?
• Where are you putting your CSS code? In the Theme CSS area (going via Customise-Theme-Advanced-Edit) or in a CSS block somewhere?
• As per my last post above, if you use the Firebug Dev Tools can you see if your code is being applied/ignored?

Media queries for different sized screens

• I use these to do a range of things on my site. Aaron/leftquark has some great tutorials on his site that I used to get me going. Here is the link: http://www.aaronmphotography.com/Customizations/Sitewide/Screen-Width-Customizations
• He has a bunch of other handy tips there also!
• Another indespensible tool is something like Screenfly, that lets you view your site on a range of screen shapes/sizes. Here: http://quirktools.com/screenfly/

Seeing as your site is not 'public' yet, no-one else can go in and inspect your code. So the more information you can provide about what you are doing/seeing, the better!

EDIT: Had missed out the reference to Screenfly for tips on customising sites for small screens.

DLRfoto

Great stuff here, Sam! Looks like I was on the right path originally... however:D...(answers in yellow bold below)

SmugSam wrote: »

A couple of thoughts/questions Frank, to see if we can't get you there!

Margin % issue

• Have you tried again using the code I suggested above? It worked for me? Yes, but no dice still
• Where are you putting your CSS code? In the Theme CSS area (going via Customise-Theme-Advanced-Edit) or in a CSS block somewhere? Customise-Theme-Advanced-Edit
  
• As per my last post above, if you use the Firebug Dev Tools can you see if your code is being applied/ignored? Looks like the code you given me (so close to the one I tried originally) didn't quite work out. Perhaps I am applying it at the wrong place? Should I create a dedicated CSS content box?

Media queries for different sized screens

• I use these to do a range of things on my site. Aaron/leftquark has some great tutorials on his site that I used to get me going. Here is the link: http://www.aaronmphotography.com/Customizations/Sitewide/Screen-Width-Customizations
  
• He has a bunch of other handy tips there also! YES! Awesome things in there I found prior to my inquiry on the board. In Fact, I've applied a few already, but not for the media quiries - nice find!
  

Seeing as your site is not 'public' yet, no-one else can go in and inspect your code. So the more information you can provide about what you are doing/seeing, the better!

Oh so close it feels! hehe

SmugSam

OK - First up HUGE apologies: I just realised there is a typo in my code!! I have a space in the wrong place - the period should be before the 'sm-page-layout-full', not after the previous element! So like this:

.sm-page-layout .sm-page-layout-full {
margin-top: 25%!important;
}

Sorry! That would stop it from working.

I realise that the code I supplied was almost the same as yours (well, now it is corrected...). I see no real reason why mine would work and yours wouldn't - just that I had actually seen my in action so it was a 'known good' from my testing!

Two further thoughts:

1.) Are you sure the code isn't actually working but you just can't tell? I am not sure what the difference would look like between 450px and 25%?? But perhaps you could try varying the number to something more extreme - say 1% or 80% - and then see if you notice a difference.

2.) I have captured the process so maybe you can see more easily where to look for problems. The following is how I added it to the Theme CSS (I have also had it work by adding a CSS block to a specific page):

Before: You can see the small gap above the 'centre' content block, the margin settings in the Layout panel of the customiser bar, the relevant area in the Inspector at bottom of screen and, to the right, where the 24px top margin is currently applied.
http://postimg.org/image/89r3ngy6p/

Code: As entered in the Theme CSS area
http://postimg.org/image/89r3ngy6p/

After: For the same section in the Inspector at the bottom of screen, you can now see the '25%' top margin applied in the settings at right, and the resultant change in spacing above the 'centre' content block on the page.
http://postimg.org/image/lpe4cx6oh/


For the media query stuff, I also had forgotten to add one other tool to the list earlier (I have edited it since) but Screenfly, if you haven't seen it, is extremely useful for testing.

Hopefully this will get you past the finish line!

DLRfoto

All sorted on the %age front. Will try to massage the media queries now.

Looked like the specific code needed to be applied to the specific page whereas before, I was trying to achieve this through the Advanced - Edit - CSS settings of my global Customization mode.

Thank you ever so much, Sam! I will now know how to proceed on where to place the codes for the media queries!

Kindest,
Frank

SmugSam

DLRfoto wrote: »

Thank you ever so much, Sam! I will now know how to proceed on where to place the codes for the media queries!

Fantastic! My pleasure Frank. For the media queries - I think that you will probably need to put these in the entire Theme CSS, or else you will have to add them to every page. But a bit of trial and error will get you on the right path. And remember Screenfly!