Photoshop Question posted in
The official user guide can be found here.

Image not aligning to the bottom right and menu pushing hero down in Foundation 6 – Photoshop

I’m trying to code my portfolio and this is the layout I have in photoshop:

Note: this is a reduced image preview

I’m trying to align the images and the content but I’m having some challenges. Maybe I’m doing something wrong with the general structure?

Problems:

1- I’m trying to align the text and the fist case UI screenshot within the div to be rendered on the bottom right initially then when shrunk to mobile stack as one column below the text. I tried using different things such as encapsulating the image with a div and making position: relative to that parent and the image absolute but it didn’t work. I also used other parameters such as margin, float, alignment.

Problem preview:

[![image alignment problem][2]][2]

HTML CODE:

   <!-- start of case 1 -->
    <div id="case1" class="row fullWidth">
     <div class="small-6 medium-6 large-6 columns">
      <div class="case1text">
        <h2>A new class of real-time software<h2>
      </div>
     </div>
     <div class="small-6 medium-6 large-6 columns">
       <div class=case_image_container>
        <img class="case_image" alt-check_content_below src="https://danielvianna.github.io/images/blacktrax_gui.png">
       </div>
     </div>
    </div>
   <!-- End of case 1-->

CSS code:

/* START OF CASE 1 SECTION HOMEPAGE*/

#case1 {
    /* Permalink - use to edit and share this gradient:          http://colorzilla.com/gradient-editor/#040e1d+0,000000+100 */
    background: #040e1d; /* Old browsers */
    background: -moz-linear-gradient(top, #040e1d 0%, #000000 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #040e1d 0%,#000000 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #040e1d 0%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#040e1d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
    height: 95vh;
    width: 100%;
    position: relative;
}

.case1text {
    position: relative;
    top: 50%;
    left: 70%;
    margin: -6.25em 0 0 -9.38em; /* this defines the position for the hero text*/
    background-color: transparent; /* used colored for detecting problems*/
    height: 31.5em;
}

.case_image_container {
    position:relative;
    margin-left: 0;
    background-color: red;
    margin-bottom: 1em;

}

.case_image {
    height:auto;
    width: 40em;
    position: sticky;
    margin-left: 5;
    border: 0;
    font-size: 1.4em;

}
/* END OF CASE 1 SECTION HOMEPAGE*/

2-My menu when opened is pushing stuff down the hero image on mobile, instead of rendering on top as a different layer despite giving a z-index to both entities

Problem preview:

html code:

 <!-- Start Top Menu Bar -->
   <div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium">
     <button class="menu-icon" type="button" data-toggle></button>
     <div class="title-bar-title">Menu</div>
   </div>

   <div class="top-bar" id="main-menu">
     <div class="top-bar-left">
       <ul class="dropdown menu" data-dropdown-menu>
         <li class="menu-text"><img id="arrow" alt-check_content_below src="https://danielvianna.github.io/images/daniel_logo2.png"></li>
       </ul>
     </div>
     <div class="top-bar-right">
       <ul id="menu" class="vertical medium-horizontal menu" data-responsive-menu="drilldown medium-dropdown">
         <li class="has-submenu">
           <a href="#">Work</a>
           <ul class="submenu menu vertical" data-submenu>
             <li><a href="#">Blacktrax UI</a></li>
             <li><a href="#">Pocket Freud</a></li>
             <li><a href="#">Blacktrax Website</a></li>
             <li><a href="#">WWF E-store</a></li>
             <li><a href="#">Walrus</a></li>
           </ul>
         </li>
         <li><a href="#">About</a></li>
         <li><a href="#">Contact</a></li>
       </ul>
     </div>
   </div>
   <!-- end of Top Menu Bar -->



   <!-- Start Hero Section-->

   <div class="row fullWidth" id="hero">
    <div class="small-6 medium-6 large-6 column">
    </div>
    <div class="small-6 medium-6 large-6 column">
     <div id="text_hero">
      <div id="portfolio_text_container">
       <h6 id="portfolio_text">PORTFOLIO</h6>
      </div>
      <h1>I’m <br /> Daniel Vianna</h1>
      <h3>a UX designer with <br /> a mission to make <br /> technology more <br />human.</h3>
      <div id="arrow_container">
        <img id="arrow" alt-check_content_below src="https://danielvianna.github.io/images/arrow.svg">
      </div> <!-- arrow container close -->
     </div> <!-- text hero close -->
    </div> <!-- second div column close -->

</div> <!-- row close -->
   <!-- End Hero Section -->

CSS CODE:

/* START GLOBAL CONTAINER STYLES*/
body {
  margin-top: 2rem;
}


.fullWidth {
   width: 100%;
   margin-left: auto;
   margin-right: auto;
   max-width: initial;
}

/* START GLOBAL CONTAINER STYLES*/

/* START GLOBAL FONT STYLES*/
h1{
    font-family: open sans, sans-serif;
    color: white;
    font-weight: 700;
    font-size: calc(3.0rem + 0.4vw);
    line-height: 1.1;
    max-width: calc(28rem + 0.5vw);
    margin-bottom: 0.5rem;
   }


h2{
    font-family: open sans, sans-serif;
    color: white;
    font-weight: 700;
    font-size: calc(3.0rem + 0.4vw);
    line-height: 1.1;
    max-width: calc(28rem + 0.5vw);
    margin-bottom: 0.5rem;
}

h3{
    font-family: open sans, sans-serif;
    color: white;
    font-weight: 300;
    font-size: calc(0.9rem + 0.4vw);
    line-height: 1.5  ;
    max-width: calc(28rem + 0.5vw);
    margin-bottom: 0.5rem;
   }

/* END OF START GLOBAL FONT STYLES*/


/* START OF NAVIGATION BAR*/
.title-bar {
    background-color: #1e1e1e;
    padding: 0.9rem;
}

.title-bar-title {
    color: #fff;
    font-family: "open sans", sans-serif;
    font-weight: 400;
}

.top-bar-right {
    z-index: 9999!important;
}

.top-bar {
    background-color: #1e1e1e;
}

.top-bar ul {
    background: #333;
}

.top-bar ul li {
    background-color: #1e1e1e;
}

.top-bar ul li a {
   color: #fff;
   font-family: "open sans", sans-serif;
   font-weight: 400;
}

#main-menu li:hover,
#main-menu li a:hover {
  background: #2f2f2f;
}

#main-menu ul {
  background: #1e1e1e ;
  border: none;
}

#main-menu,
.title-bar {
  background: #1e1e1e;
}

.menu-text {
  background:-color: #fff;
}


@media only screen and (min-width: 40em) {
 .menu:last-child {
     border-left: none;
 }
 .menu:first-child {
     border-left: none; }
 .menu li:not(:last-child) {
     border-right: none;
 }
 .menu-text {
     display: none !important;
 }
 .dropdown.menu.medium-horizontal > li.is-dropdown-submenu-parent > a::after     {
     border-color: white transparent transparent; /* changes triangle back icon when in medium & large screens */
 }
}

.js-drilldown-back > a::before {
border-color: transparent white transparent transparent;  /* changes triangle back icon when in mobile */
}

.dropdown.menu .submenu {
border: none;
}

.dropdown.menu .is-dropdown-submenu-parent.is-right-arrow > a::after {
    border-color: #fff transparent transparent;
}

.is-drilldown-submenu-parent > a::after {
    border-color: transparent transparent transparent #fff;
}

.js-drilldown-back::before {
    border-color: transparent #fff transparent transparent;
}




/* END OF NAVIGATION BAR*/


/* START HERO SECTION HOMEPAGE*/
#hero {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0c009a+0,1000b3+15,1300d8+28,1200d3+42,1100d7+53,1300e8+61,1600fa+74,1400f8+87,1400f8+100 */
    background: #0c009a; /* Old browsers */
    background: -moz-linear-gradient(45deg,  #0c009a 0%, #1000b3 15%, #1300d8 28%, #1200d3 42%, #1100d7 53%, #1300e8 61%, #1600fa 74%, #1400f8 87%, #1400f8 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(45deg,  #0c009a 0%,#1000b3 15%,#1300d8 28%,#1200d3 42%,#1100d7 53%,#1300e8 61%,#1600fa 74%,#1400f8 87%,#1400f8 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(45deg,  #0c009a 0%,#1000b3 15%,#1300d8 28%,#1200d3 42%,#1100d7 53%,#1300e8 61%,#1600fa 74%,#1400f8 87%,#1400f8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0c009a', endColorstr='#1400f8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    background-image: url(https://danielvianna.github.io/images/daniel_vianna_background-min.jpg);
    background-repeat: no-repeat !important;
    background-size: cover;
    height: 95vh;
    width: 100%;
    background-position: center !important;
    margin: 0;
}

@media only screen and (max-width : 480px) { /* this switches the background for a darker one in small res */
#hero {
    background-color: #0c009a;
    background-image: url(https://danielvianna.github.io/images/daniel-header-hero-smallscreens-darker.jpg);
    background-position: right !important;
    }
}


#text_hero {
    position: absolute;
    top: 50%;
    left: 70%;
    margin: -6.25em 0 0 -9.38em; /* this defines the position for the hero text*/
    background-color: transparent; /* used colored for detecting problems*/
    height: 31.5em;
}

#portfolio_text_container {
    display:flex;
    flex-direction:row;
    justify-content:left;
    flex-wrap:wrap;
    align-items:flex-start;
    background: transparent; /* used colored for detecting problems*/
    margin:auto;
    height:5em;
    z-index: 9;
}

#portfolio_text {
    font-family: open sans, sans-serif;
    color: #ff6300!important;
    font-weight: 700;
    font-size: calc(0.5rem + 0.4vw);
    line-height: 1.5  ;
    max-width: calc(28rem + 0.5vw);
    margin-bottom: 0.5rem;
    z-index: 9;
}

#arrow_container{
    display:flex;
    flex-direction:row;
    justify-content:left;
    flex-wrap:wrap;
    align-items:flex-end;
    background: transparent; /* used colored for detecting problems*/
    margin:auto;
    height:10em;
}


@media only screen and (max-width : 480px) {
#arrow_container {
    height:2em;
    }
}
Tags:

2

Answers


  1. 0

    Just give that image a width of 100%:

    .case_image {
    height: auto;
    width: 100%;
    position: sticky;
    margin-left: 5;
    border: 0;
    font-size: 1.4em;
}
    Login or Signup to reply.
  2. 0

    1. To move it to right bottom you need to add a custom class to

      <div class="small-6 medium-6 large-6 my-custom-class column">

    The class needs to apply style only when on bigger screens so use breakpoint.

    Then style our class:

    .my-custom-class{
position: absolute;
bottom: 0;
right: 0;
padding-right:0;
}

    Next, go to .case_image_container in your css and add to this:

    float:right;

    And remove this:

    margin-bottom: 1em;

    Now your image will be positioned on the bottom as you can see on screen:

    enter image description here

    1. Just add this to#main-menu, remember to apply it only on mobile devices so add it in a mediaquery or apply it just to mobile menu class if you have one.

      position: fixed;
width: 100%;

    Remember to add z-index if needed.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search