Menu icon Foundation

My Posts


  • 4
    Replies
  • 2 issues on one site

    By dims

    OrbitEqualizer

    Hello, 1) i have an orbit slider on www.cinecurry.com . I am unable to figure out the reason why it is not animating/sliding 2) I am using equalizer on the 4 blocks below the orbit slider . For some reasons the image in the second block is not showin... (continued)

    Last Reply by Jim Milner over 5 years ago


  • 6
    Replies
  • problem with Off canvas

    By dims

    off-canvas

    Hello, I am working on a site which will uses the off-canvas navigation. There is a strange issue i am facing: When i click and drag my mouse ( from left to right) on an empty area on the page near the browser scroll-bar the off-canvas menu appears. C... (continued)

    Last Reply by Wing-Hou Chan over 5 years ago


My Comments

dims commented on Azmi Elqutob's post about 4 years

is there a URL where we can check ?

dims commented on Ekku Jokinen's post about 4 years

you can create media-query specific css to get the images center aligned on small screen.
for example create a class called .image-alignment. for large and medium resolution keep .image-alignment text-align as right and in small resolution keep .image-alignment text align as center.

dims commented on sanlorena's post about 4 years

often there are more than one ways to achieve a result. i dont think using nbsp; is a bad practice. if you need 3 columns you can use 3 columns and push the 2nd columns.. something like this:

<div class="row">
       <div class="large-12 columns">
        <h1>Excepteur sint occaecat cupidatat non</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</p>
       </div>
     </div>
     <div class="row">
       <div class="large-3 medium-3 columns">
        <ul>
         <li>San Francisco</li>
         <li>Miami</li>
         <li>Atlanta</li>
        </ul>
       </div>
             <div class="large-3 medium-3  large-push-3 columns">
        <ul>
         <li>Washington</li>
         <li>New York</li>
         <li>Denver</li>
        </ul>
       </div>
       <div class="large-3 medium-3 columns">
        <ul>
         <li>Los Angeles</li>
         <li>Chicago</li>
         <li>Portland</li>
        </ul>
       </div>
     </div>

dims commented on Ekku Jokinen's post about 4 years

Sorry ! you can remove the left and right class from the divs. Add text-align:right or left css to the divs. And add max-width:100% to the images

<div class="row">
    <div class="medium-6 columns" style="text-align:right;">
        <img  style="max-width:100%;" src="http://placehold.it/350x150">
    </div>
    <div class="medium-6 columns" style="text-align:left;">
        <img style="max-width:100%;" src="http://placehold.it/350x150">
    </div>
</div>

do you want the cyan images to be centered and adjacent to each other in all resolutions and not stack ?

<div class="row">
  <div style="text-align:center;">
  <img style="max-width:100%; padding:1rem;" src="http://placehold.it/350x150">
  <img style="max-width:100%; padding:1rem;" src="http://placehold.it/350x150">
  </div>
</div>

dims commented on sanlorena's post about 4 years

add a space in the second columns and see

// add  following in second column
&nbsp;

<div class="large-3 medium-3 columns">
       &nbsp;
   </div>

dims commented on Randy John's post about 4 years

add a href="#" inside your anchor tag

<a  href = "#" class="left-off-canvas-toggle menu-icon ">
  <span>Menü</span>
  </a>

dims commented on Cathal's post about 4 years

if you want to use visibility class, yo have to create 2 buttons one for large and on from small/medium

and use .show-for-large-up class on large button
use .hide-for-large-up on small buttom

dims commented on Ekku Jokinen's post about 4 years

not clear what you want.
I would also suggest adding images inside divs and add foundation classes to the divs
if you want to stack them from medium-up then you should use medium-12 and small-12.

if you want them to be center aligned and side by side then you can try push.

<div class="row">
    <div class="haen small-11 medium-3 medium-push-3 columns ">
        <img src="http://placehold.it/350x150">
    </div>
    <div class="olen small-11 medium-3 medium-push-3 columns end">
        <img src="http://placehold.it/350x150">
    </div>
</div>

there are other alternate ways to achieve the layout.

<div class="row">
    <div class="medium-6 columns right">
        <img src="http://placehold.it/350x150">
    </div>
    <div class="medium-6 columns left">
        <img src="http://placehold.it/350x150">
    </div>
</div>

dims commented on Jennifer Lin's post almost 5 years

try adding href="#" inside ur anchor tag

dims commented on Lex Szentmiklosy's post about 5 years

try this

<div class="row">
    <div class="large-6 medium-12 small-12 columns">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, repellendus culpa dolorem commodi itaque beatae officiis mollitia autem asperiores odit, non ducimus error. Ipsa magni architecto quidem exercitationem esse reiciendis?</p>
    </div>
    <div class="large-6 medium-12 small-12 columns">
        <div class="row">
            <div class="large-12 medium-12 small-12 columns">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque nostrum ea nulla repellat. Quos aspernatur delectus dolore tempore, vel voluptate. Quasi id rem harum enim placeat, asperiores magni! Reprehenderit, alias!
                </p>

            </div>
            <div class="large-12 medium-12 small-12 columns">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores inventore voluptates culpa deserunt provident dolorum omnis eligendi itaque quasi non eaque iure modi placeat blanditiis, quaerat fugiat! Omnis, rerum, veniam.</p>
            </div>
        </div>
    </div>
</div>

Posts Followed

  • 1
    Reply
  • Resolution breaking website

    By Azmi Elqutob

    resolutionbreak

    Website picture isnt following the word size. Like when you increase the screen resolution or use the browser zoom. The words get bigger and smaller. But the picture stays the same size. So when you zoom in the words go off the picture. Help? Also, wha... (continued)

    Last Reply by dims about 4 years ago


  • 6
    Replies
  • empty columns

    By sanlorena

    columnsgrid

    How can I create empty spaces? You can see in the html, I created 4 columns, the 2nd column was the one I wanted empty, but the 3rd column took its position. Why is this and how can I have empty spaces?

    Last Reply by sanlorena about 4 years ago







  • 6
    Replies
  • problem with Off canvas

    By dims

    off-canvas

    Hello, I am working on a site which will uses the off-canvas navigation. There is a strange issue i am facing: When i click and drag my mouse ( from left to right) on an empty area on the page near the browser scroll-bar the off-canvas menu appears. C... (continued)

    Last Reply by Wing-Hou Chan over 5 years ago


Following

    No Content

Followers

My Posts




My Comments

You commented on Azmi Elqutob's post about 4 years

is there a URL where we can check ?

You commented on Ekku Jokinen's post about 4 years

you can create media-query specific css to get the images center aligned on small screen.
for example create a class called .image-alignment. for large and medium resolution keep .image-alignment text-align as right and in small resolution keep .image-alignment text align as center.

You commented on sanlorena's post about 4 years

often there are more than one ways to achieve a result. i dont think using nbsp; is a bad practice. if you need 3 columns you can use 3 columns and push the 2nd columns.. something like this:

<div class="row">
       <div class="large-12 columns">
        <h1>Excepteur sint occaecat cupidatat non</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</p>
       </div>
     </div>
     <div class="row">
       <div class="large-3 medium-3 columns">
        <ul>
         <li>San Francisco</li>
         <li>Miami</li>
         <li>Atlanta</li>
        </ul>
       </div>
             <div class="large-3 medium-3  large-push-3 columns">
        <ul>
         <li>Washington</li>
         <li>New York</li>
         <li>Denver</li>
        </ul>
       </div>
       <div class="large-3 medium-3 columns">
        <ul>
         <li>Los Angeles</li>
         <li>Chicago</li>
         <li>Portland</li>
        </ul>
       </div>
     </div>

You commented on Ekku Jokinen's post about 4 years

Sorry ! you can remove the left and right class from the divs. Add text-align:right or left css to the divs. And add max-width:100% to the images

<div class="row">
    <div class="medium-6 columns" style="text-align:right;">
        <img  style="max-width:100%;" src="http://placehold.it/350x150">
    </div>
    <div class="medium-6 columns" style="text-align:left;">
        <img style="max-width:100%;" src="http://placehold.it/350x150">
    </div>
</div>

do you want the cyan images to be centered and adjacent to each other in all resolutions and not stack ?

<div class="row">
  <div style="text-align:center;">
  <img style="max-width:100%; padding:1rem;" src="http://placehold.it/350x150">
  <img style="max-width:100%; padding:1rem;" src="http://placehold.it/350x150">
  </div>
</div>

You commented on sanlorena's post about 4 years

add a space in the second columns and see

// add  following in second column
&nbsp;

<div class="large-3 medium-3 columns">
       &nbsp;
   </div>

You commented on Randy John's post about 4 years

add a href="#" inside your anchor tag

<a  href = "#" class="left-off-canvas-toggle menu-icon ">
  <span>Menü</span>
  </a>

You commented on Cathal's post about 4 years

if you want to use visibility class, yo have to create 2 buttons one for large and on from small/medium

and use .show-for-large-up class on large button
use .hide-for-large-up on small buttom

You commented on Ekku Jokinen's post about 4 years

not clear what you want.
I would also suggest adding images inside divs and add foundation classes to the divs
if you want to stack them from medium-up then you should use medium-12 and small-12.

if you want them to be center aligned and side by side then you can try push.

<div class="row">
    <div class="haen small-11 medium-3 medium-push-3 columns ">
        <img src="http://placehold.it/350x150">
    </div>
    <div class="olen small-11 medium-3 medium-push-3 columns end">
        <img src="http://placehold.it/350x150">
    </div>
</div>

there are other alternate ways to achieve the layout.

<div class="row">
    <div class="medium-6 columns right">
        <img src="http://placehold.it/350x150">
    </div>
    <div class="medium-6 columns left">
        <img src="http://placehold.it/350x150">
    </div>
</div>

You commented on Jennifer Lin's post almost 5 years

try adding href="#" inside ur anchor tag

You commented on Lex Szentmiklosy's post about 5 years

try this

<div class="row">
    <div class="large-6 medium-12 small-12 columns">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, repellendus culpa dolorem commodi itaque beatae officiis mollitia autem asperiores odit, non ducimus error. Ipsa magni architecto quidem exercitationem esse reiciendis?</p>
    </div>
    <div class="large-6 medium-12 small-12 columns">
        <div class="row">
            <div class="large-12 medium-12 small-12 columns">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque nostrum ea nulla repellat. Quos aspernatur delectus dolore tempore, vel voluptate. Quasi id rem harum enim placeat, asperiores magni! Reprehenderit, alias!
                </p>

            </div>
            <div class="large-12 medium-12 small-12 columns">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores inventore voluptates culpa deserunt provident dolorum omnis eligendi itaque quasi non eaque iure modi placeat blanditiis, quaerat fugiat! Omnis, rerum, veniam.</p>
            </div>
        </div>
    </div>
</div>

Posts Followed

Following

  • No Content

Followers

  • No Content