Menu icon Foundation

Developer

My Posts

No Content

My Comments

sudheer commented on CNK's post over 5 years

what middle screen? and post your HTML and bigger screen shot

sudheer commented on CNK's post over 5 years

Have your HTML like this..

<div class=row>
  <div class="medium-6 large-4 columns"><article>...</article></div>
  <div class="medium-6 large-4 columns"><article>...</article></div>
<div class="medium-6 large-4 columns"><article>...</article></div>

  <div class="medium-6 large-4 columns"><article>...</article></div>
  <div class="medium-6 large-4 columns"><article>...</article></div>
<div class="medium-6 large-4 columns"><article>...</article></div>


  <div class="medium-6 large-4 columns"><article>...</article></div>
  <div class="medium-6 large-4 columns"><article>...</article></div>
<div class="medium-6 large-4 columns"><article>...</article></div>
</div>

sudheer commented on CNK's post over 5 years

Foundation uses 12 grid column structure..

you have four large-4 divs so it adds upto 16 columns,So three are aligned in a row and last div is floated to right and aligned below that row(default css property of last row in foundation).

change it to
HTML
<div class="medium-6 large-3 columns"><article>...</article></div>

sudheer commented on MT's post over 5 years

Have button with div id="view-full"
```Javascript
$(document).ready(function(){
var targetWidth = 980;

$('#view-full').bind('click', function(){
    $('meta[name="viewport"]').attr('content', 'width=' + targetWidth);
});

});
```

sudheer commented on karunaker's post over 5 years

HTML looks fine but ya he used a lot of custom.css. with out looking at the custom css its hard to talk about size and standards. judging from the classes i am not sure he used anything other than grid system from foundation. He could have even avoided the whole css and download a custom version reducing foundation css.
Maintenance issues-Check if there is another custom css file or overridden foundation css because this causes a problem when upgrading foundation.

Browser compatibility again one cannot decide with out looking at CSS.

sudheer commented on Bridget's post over 5 years

Hello Bridget.

  • If you want accordian to be placed at the left of screen even on ipad change the div class to medium-9 and medium-3 for the image and accordian. If you want to have accordian at the bottom of the page even on Ipad then you have add few lines of css.
@media only screen and (min-width: 40.063em)
.pull-9 {
right:0%;
}
@media only screen and (min-width: 40.063em)
.push-3 {
left:0%
}

and keep the div with large-9 and large-3 columns.

the problem with layout on ipad is because of the pull and push css in media querie.

-coming to footer you have large-4 and medium-4 as div classes .large-4 has a width of 25% according to css so on large screens you have four column structure but where as medium-4 has 33.333% which makes the fourth column drop to new row.

change the div classes for footer to large-3 and medium-3 .

PS :Dont edit the default foundation.css add custom styles to another stylesheet and include that into your HTML. (you have changed you large-4 div from 33.33% to 25%.creates a problem if have to use large-4 div for someother column with 33.33%)

sudheer commented on Nelson Fernandez's post over 5 years

works fine!!

sudheer commented on Wing-Hou Chan's post over 5 years

can we have flag comment?

sudheer commented on Shockzz's post over 5 years

max-width is default set to 1000px in foundation.In order to have full screen width set max-width to none.

#header, #footer {

                float:left;
    padding:15px 0;
    width:100%;
max-width: none;

  }
#header, #footer {
width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
}

sudheer commented on Sebastian Pierre's post over 5 years

ya it is possible..

i have a design q for you..Why hide the bigger-div initially? why do you want to display blank div?

have some info initially and upon click on small div's load the respective content into the bigger div.

Posts Followed

No Content

Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on CNK's post over 5 years

what middle screen? and post your HTML and bigger screen shot

You commented on CNK's post over 5 years

Have your HTML like this..

<div class=row>
  <div class="medium-6 large-4 columns"><article>...</article></div>
  <div class="medium-6 large-4 columns"><article>...</article></div>
<div class="medium-6 large-4 columns"><article>...</article></div>

  <div class="medium-6 large-4 columns"><article>...</article></div>
  <div class="medium-6 large-4 columns"><article>...</article></div>
<div class="medium-6 large-4 columns"><article>...</article></div>


  <div class="medium-6 large-4 columns"><article>...</article></div>
  <div class="medium-6 large-4 columns"><article>...</article></div>
<div class="medium-6 large-4 columns"><article>...</article></div>
</div>

You commented on CNK's post over 5 years

Foundation uses 12 grid column structure..

you have four large-4 divs so it adds upto 16 columns,So three are aligned in a row and last div is floated to right and aligned below that row(default css property of last row in foundation).

change it to
HTML
<div class="medium-6 large-3 columns"><article>...</article></div>

You commented on MT's post over 5 years

Have button with div id="view-full"
```Javascript
$(document).ready(function(){
var targetWidth = 980;

$('#view-full').bind('click', function(){
    $('meta[name="viewport"]').attr('content', 'width=' + targetWidth);
});

});
```

You commented on karunaker's post over 5 years

HTML looks fine but ya he used a lot of custom.css. with out looking at the custom css its hard to talk about size and standards. judging from the classes i am not sure he used anything other than grid system from foundation. He could have even avoided the whole css and download a custom version reducing foundation css.
Maintenance issues-Check if there is another custom css file or overridden foundation css because this causes a problem when upgrading foundation.

Browser compatibility again one cannot decide with out looking at CSS.

You commented on Bridget's post over 5 years

Hello Bridget.

  • If you want accordian to be placed at the left of screen even on ipad change the div class to medium-9 and medium-3 for the image and accordian. If you want to have accordian at the bottom of the page even on Ipad then you have add few lines of css.
@media only screen and (min-width: 40.063em)
.pull-9 {
right:0%;
}
@media only screen and (min-width: 40.063em)
.push-3 {
left:0%
}

and keep the div with large-9 and large-3 columns.

the problem with layout on ipad is because of the pull and push css in media querie.

-coming to footer you have large-4 and medium-4 as div classes .large-4 has a width of 25% according to css so on large screens you have four column structure but where as medium-4 has 33.333% which makes the fourth column drop to new row.

change the div classes for footer to large-3 and medium-3 .

PS :Dont edit the default foundation.css add custom styles to another stylesheet and include that into your HTML. (you have changed you large-4 div from 33.33% to 25%.creates a problem if have to use large-4 div for someother column with 33.33%)

You commented on Nelson Fernandez's post over 5 years

works fine!!

You commented on Wing-Hou Chan's post over 5 years

can we have flag comment?

You commented on Shockzz's post over 5 years

max-width is default set to 1000px in foundation.In order to have full screen width set max-width to none.

#header, #footer {

                float:left;
    padding:15px 0;
    width:100%;
max-width: none;

  }
#header, #footer {
width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
}

You commented on Sebastian Pierre's post over 5 years

ya it is possible..

i have a design q for you..Why hide the bigger-div initially? why do you want to display blank div?

have some info initially and upon click on small div's load the respective content into the bigger div.

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content