Need help? Check out our Support site, then


Moving up content by reducing the spaces between header, menu,...

  1. themomentmaker
    Member

    Hello wordpress Gurus out there!
    I'm an absolute WordPress-Greenhorn and would need some help with my page. The problem is, if you land on my page, all crucial pics are cut and you need to scroll on every page to not just see the header.
    I'm a wedding planner and all these images should have a huge impact on my customers.
    So i thought, that maybe if a narrow the space between the header, the ribbon, the menu and the title I could move the whole page up. I just don't know how! :-S

    Another problem of mine is: If I make the letters in the ribbon bigger, it also changes them on the mobile version although I unchecked the box for mobile!

    I would be so grateful if someone could help me!

    Looking forward for any great idea to solve the cutting-head-pictures!

    xoxo Lorinda

    The blog I need help with is themomentmaker.at.

  2. thesacredpath
    Staff

    Hi there, on the spacing of the header elements, add the following CSS and see what you think. You can adjust the values as desired, and em units can be decimal as well, so you can have 1.5 or 0.6 or 0.4125 if you wish. The last two take away some of the space between the page title and the image.

    #masthead img {
        margin-bottom: 1em;
    }
    #description {
        margin-bottom: 1em;
    }
    #masthead {
        padding-bottom: 0.8em;
    }
    .entry-content, .entry-summary {
        margin-top: 0;
    }
    .entry-title {
        margin-bottom: 0.2em;
    }

    The theme you are using is a responsive theme design, which means it doesn't need a dedicated mobile theme. The theme adjusts for all browser window widths and all devices so the theme retains its look on all.

    You can use an @media rule which will activate your settings at a certain width of browser or device screen.

    The following activates the site description CSS you have at 400px. Below that the tag line will revert to the original design. Replace the rule you have now with the following.

    @media screen and (min-width: 400px) {
    #site-description {
    	border-bottom:none;
    	color:#fff;
    	display:block;
    	font-family:'Oswald', sans-serif;
    	font-size:11px;
    	font-size:1.68rem;
    	line-height:2.6em;
    	text-align:center;
    	text-shadow:1px 1px 2px rgba(0,0,0,0.3);
    	text-transform:uppercase
    }
    }

    Narrow your browser window way down to see how this works, and then also view it on a phone in portrait and landscape. In portrait you should see the smaller text size, but in landscape, you should see the larger.

Topic Closed

This topic has been closed to new replies.

About this Topic