0

I need help with skeleton @ http://www.slutatnian.se/skolor/nosnas/

On the site there is a picture that is below the code and that works fine when im on a computer. But if im using a mobile device the picture will get on the bottom off the screen, and i want the picture to be after "Nösnäsgymnasiumet" on a mobile device but how do i do that?

(Don't mind the hotpink, im using it the see the columns)

here is the html code.

<div class ="container">

<div class="nosnastitel">
    <div class="eleven columns offset by one alpha" style="background-color:hotpink">
    <h3>Nösnäsgymnasiumet.</h3>
    </div>
    </div>

    <div class="six columns offset-by-one  " style="background-color:hotpink">
    <div class="infonosnas">


    <h4> Om Nösnäsgymnasiet </h4>


    <h5> Utbildning för dig </h5>
    <p> Nösnäsgymnasiet är en skola med stort utbildningsutbud, många möjligheter, kompetens och engagemang. Vi har som målsättning att du som elev skall känna dig trygg på vår skola och få en utbildning som ger dig en bra start för framtiden. </p>

    <br/>
    <h5> Gemenskap och trivsel </h5>
    <p> Här finns något för alla!
    Vi har ett stort utbud av högskoleförberedande program, yrkesprogram, introduktionsprogram, lärlingsutbildning och gymnasiesärskola.

    Hos oss kan du förbereda dig för högskolestudier eller yrkesliv, utveckla dina estetiska förmågor eller inrikta dig inom bland annat ekonomi, data, teknik och media. </p>
    <br />
    <h5>Många valmöjligheter </h5>
    <p>Nära hav och natur
    Skolan ligger på det vackra västkusten i lummig grönska och med utsikt över Hakefjorden. Ett stenkast bort finns salta bad, naturstigar och friskvårdsanläggning med simhall och idrottsplats. </p>

    <p>I skolans centrala del ligger administrationen och elevbiblioteket som är öppet varje dag. Det finns också ett elevcafé och två skolmatsalar. Med några minuters promenadväg från Stenungsunds centrum har du snabb tillgång till buss och tåg. </p>

    </div>

   </div>
   <div class="four columns offset-by-five omega">
    <div class="nosnasbild">
    <img src="skola2.jpg" alt="nosnasbild" /> </a>
    </div>
    </div>

</div>
ekad
  • 14,436
  • 26
  • 44
  • 46
user3252453
  • 1

1 Answers1

0

Solved it by adding two of the same picture but with different classes. After that I used I added 

.nosnasbild img{
     display: none; 
}

in the CSS.

And the other I used as media query, and used 

.nosnaspic img{
     display: none; 
}

It's not the most optimal solution but it works fine.

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
user3252453
  • 1