Menu icon Foundation

My Posts







My Comments

Wyeth Myers commented on nadame's post almost 2 years

Hi nadame,
Here's a simple approach to do this.
I'm going to go down a simpler path to help you understand how this works.
Example and for codepen: https://codepen.io/wyeth/pen/mMroXr
Hope this helps.
 
<div id="sampleBg1">
<div class="row">
<div class="small-12 medium-12 large-12 columns">
<div class="sample1">
<h1>Try one of these buttons</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>

<div id="sampleBg2">
<div class="row collapse expanded" data-equalizer data-equalize-on="medium" id="test-eq">
<div class="small-12 medium-6 large-6 columns">
<div class="sample2" data-equalizer-watch></div>
</div>

&lt;div class="small-12 medium-6 large-6 columns"&gt;
  &lt;div class="sample3" data-equalizer-watch&gt;
      &lt;h2&gt;Try one of these buttons&lt;/h2&gt;
      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;      
&lt;/div&gt;

</div>
 
.row {
max-width: 75rem;
}

sampleBg1 {

background-color: #ffffff;
}

sampleBg2 {

background-color: #efefef;
}
.sample1 {
font-size: 16px;
font-weight: 300;
padding: 50px 0;
}

.sample2 {
background: url("https://images.pexels.com/photos/400678/pexels-photo-400678.jpeg?w=940&amp;h=650&amp;auto=compress&amp;cs=tinysrgb") no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
text-align: center;
position: relative;
background-color: #ffffff;
width: 100%;
min-height: 500px;
}
.sample3 {
font-size: 16px;
font-weight: 300;
background-color: #efefef;
padding-left: 30px;
width: 100%;
height: 500px;
display: flex;
justify-content: center;
flex-direction: column;

}

Wyeth Myers commented on Wyeth Myers's post almost 2 years

Hi Ryan,
Great response from you and thank you.I've already sorted the issue out.1) I'm not using scss, just the css version.
2) <div class="row align-middle"></div> didn't work at all no matter what I tried with the flex-grid.
3) Had to settle for standard CSS to vertically center the text within the fixed height column.
.class-name {
width: 100%;
display: flex;
justify-content: center;
flex-direction: column;
}
 

Wyeth Myers commented on Wyeth Myers's post almost 2 years

Hi @Brock.
The client wants in in that area. Nothing I can do about it.The large screen/desktop screen it shows up fine as I knew where to insert the logo. It;s the small screen Im having issues with in terms of wanting to know how to insert it.
 
The location is: http://www.indigrowth,com 

Wyeth Myers commented on Wyeth Myers's post almost 2 years

Can anyone help out with this issue?
 
<div id="in-market-expansion">

<div class="row align-middle" id="in-market-expansion1" data-magellan-target="in-market-expansion1">
<div class="small-12 medium-12 large-6 columns">
<div class="large-image-1 overlay-text middle">
<h2>In-Market Expansion</h2>
</div>
</div>

&lt;div class="small-12 medium-12 large-6 columns"&gt;
  &lt;div class="in-market-expansion-content"&gt;
    &lt;p&gt;You know your business, the market, and need to grow. Do questions like these reflect your dilemma?&lt;/p&gt;
    &lt;ul id="list-left"&gt;
      &lt;li&gt;What is the Dollar value of market demand and its direction over the next five years?&lt;/li&gt;
      &lt;li&gt;Which companies could disrupt the market?&lt;/li&gt; 
      &lt;li&gt;Which competitor company should we acquire?&lt;/li&gt;
      &lt;li&gt;Are customer&rsquo;s adequately aware or incentivized to buy?&lt;/li&gt;
      &lt;li&gt;Are there market niches to exploit?&lt;/li&gt;
      &lt;li&gt;Which issues are holding the customer back from a purchase?&lt;/li&gt; 
      &lt;li&gt;What changes in distribution channels can fundamentally alter the customer&rsquo;s purchase journey?&lt;/li&gt;
    &lt;/ul&gt;
    &lt;span class="we-can-help-you"&gt;&lt;a class="contact-help" href="http://www.indigrowth.com/contact/"&gt;Contact us&lt;/a&gt; to get your answers. This is &lt;a class="contact-help" href="http://www.indigrowth.com/services-we-offer/"&gt;how&lt;/a&gt; we can help you.&lt;/span&gt;            
  &lt;/div&gt;
&lt;/div&gt;

</div>
</div>

Wyeth Myers commented on Wyeth Myers's post almost 2 years

Hi Rafi,
This is how I want it to look like on JointsWP.
In the below image:
a) the image on the left is what it looks like now with no logo on mobile screen
b) the image on the right is how I would like it to look like.
 
Not the title bar, but the header section for the mobile view [only.]
 

Wyeth Myers commented on Wyeth Myers's post almost 2 years

Hi Emma, 
Thank you for replying. 
 
The issue here is not about JointsWP or Foundation,  it's my inability to figure out how to enqueue the files into Jointswp from Owl Carousel's CSS and JS sections.
Also,  how and where do I enter a custom script made for Owl with a call? 
This is ezypzy for me to do when working on Foundation while making a static site but when it comes to WordPress (in this case JointsWP), I find myself in no man's land. 

Wyeth Myers commented on bradfranklin 's post about 2 years

@bradfranklin: You're welcome.
 
Here's the link where you can view the development for JointWP5 Beta.
https://github.com/JeremyEnglert/JointsWP/tree/5.0
Foundation v6.3 is currently being used on JointsWP4.
Since JointsWP5 is in Beta mode, I can only hope and presume that a JointsWP 5 stable release will have Foundation v6.4 built into it, which will include the new XY grid. However, I presently see development of JWP5 beta using Foundation v6.3.1

Wyeth Myers commented on bradfranklin 's post about 2 years

@bradfranklin, I don't think you need to as JointsWP comes with the flex-grid inbuilt. Seems to work fine with me.
 
 

Wyeth Myers commented on Wyeth Myers's post about 2 years

Hi Ryan,
 
Thank you for your replies and I'll incorporate the instructions given by you.
 
I did find a way to increase the height. All I had to do was increase the line-height of:
.top-bar,

.top-bar ul

{

line-height: 65px;

}

.top-bar ul li a{

line-height: 65px;

}

.top-bar ul li a:hover{

line-height: 65px;

}

 
Which still brings me to the horizontal sub-menu for large screens. I've changed the class from vertical to horizontal but still doesn't work.
The reason why I'm being so specific is if I have to build a sub-menu using a horizontal pane full-width using my own CSS, then I might as well use the HTML5 boilerplate instead of Foundation.
One of the reasons I love using Foundation is it saves me a lot of time, however this is one situation which has me literally tearing my hair out. 
 

Wyeth Myers commented on Juan David Perafan's post about 2 years

 
Already answered on your other thread.

Posts Followed










Following

    No Content

Followers

My Posts

My Comments

You commented on nadame's post almost 2 years

Hi nadame,
Here's a simple approach to do this.
I'm going to go down a simpler path to help you understand how this works.
Example and for codepen: https://codepen.io/wyeth/pen/mMroXr
Hope this helps.
 
<div id="sampleBg1">
<div class="row">
<div class="small-12 medium-12 large-12 columns">
<div class="sample1">
<h1>Try one of these buttons</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>

<div id="sampleBg2">
<div class="row collapse expanded" data-equalizer data-equalize-on="medium" id="test-eq">
<div class="small-12 medium-6 large-6 columns">
<div class="sample2" data-equalizer-watch></div>
</div>

&lt;div class="small-12 medium-6 large-6 columns"&gt;
  &lt;div class="sample3" data-equalizer-watch&gt;
      &lt;h2&gt;Try one of these buttons&lt;/h2&gt;
      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;      
&lt;/div&gt;

</div>
 
.row {
max-width: 75rem;
}

sampleBg1 {

background-color: #ffffff;
}

sampleBg2 {

background-color: #efefef;
}
.sample1 {
font-size: 16px;
font-weight: 300;
padding: 50px 0;
}

.sample2 {
background: url("https://images.pexels.com/photos/400678/pexels-photo-400678.jpeg?w=940&amp;h=650&amp;auto=compress&amp;cs=tinysrgb") no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
text-align: center;
position: relative;
background-color: #ffffff;
width: 100%;
min-height: 500px;
}
.sample3 {
font-size: 16px;
font-weight: 300;
background-color: #efefef;
padding-left: 30px;
width: 100%;
height: 500px;
display: flex;
justify-content: center;
flex-direction: column;

}

You commented on Wyeth Myers's post almost 2 years

Hi Ryan,
Great response from you and thank you.I've already sorted the issue out.1) I'm not using scss, just the css version.
2) <div class="row align-middle"></div> didn't work at all no matter what I tried with the flex-grid.
3) Had to settle for standard CSS to vertically center the text within the fixed height column.
.class-name {
width: 100%;
display: flex;
justify-content: center;
flex-direction: column;
}
 

You commented on Wyeth Myers's post almost 2 years

Hi @Brock.
The client wants in in that area. Nothing I can do about it.The large screen/desktop screen it shows up fine as I knew where to insert the logo. It;s the small screen Im having issues with in terms of wanting to know how to insert it.
 
The location is: http://www.indigrowth,com 

You commented on Wyeth Myers's post almost 2 years

Can anyone help out with this issue?
 
<div id="in-market-expansion">

<div class="row align-middle" id="in-market-expansion1" data-magellan-target="in-market-expansion1">
<div class="small-12 medium-12 large-6 columns">
<div class="large-image-1 overlay-text middle">
<h2>In-Market Expansion</h2>
</div>
</div>

&lt;div class="small-12 medium-12 large-6 columns"&gt;
  &lt;div class="in-market-expansion-content"&gt;
    &lt;p&gt;You know your business, the market, and need to grow. Do questions like these reflect your dilemma?&lt;/p&gt;
    &lt;ul id="list-left"&gt;
      &lt;li&gt;What is the Dollar value of market demand and its direction over the next five years?&lt;/li&gt;
      &lt;li&gt;Which companies could disrupt the market?&lt;/li&gt; 
      &lt;li&gt;Which competitor company should we acquire?&lt;/li&gt;
      &lt;li&gt;Are customer&rsquo;s adequately aware or incentivized to buy?&lt;/li&gt;
      &lt;li&gt;Are there market niches to exploit?&lt;/li&gt;
      &lt;li&gt;Which issues are holding the customer back from a purchase?&lt;/li&gt; 
      &lt;li&gt;What changes in distribution channels can fundamentally alter the customer&rsquo;s purchase journey?&lt;/li&gt;
    &lt;/ul&gt;
    &lt;span class="we-can-help-you"&gt;&lt;a class="contact-help" href="http://www.indigrowth.com/contact/"&gt;Contact us&lt;/a&gt; to get your answers. This is &lt;a class="contact-help" href="http://www.indigrowth.com/services-we-offer/"&gt;how&lt;/a&gt; we can help you.&lt;/span&gt;            
  &lt;/div&gt;
&lt;/div&gt;

</div>
</div>

You commented on Wyeth Myers's post almost 2 years

Hi Rafi,
This is how I want it to look like on JointsWP.
In the below image:
a) the image on the left is what it looks like now with no logo on mobile screen
b) the image on the right is how I would like it to look like.
 
Not the title bar, but the header section for the mobile view [only.]
 

You commented on Wyeth Myers's post almost 2 years

Hi Emma, 
Thank you for replying. 
 
The issue here is not about JointsWP or Foundation,  it's my inability to figure out how to enqueue the files into Jointswp from Owl Carousel's CSS and JS sections.
Also,  how and where do I enter a custom script made for Owl with a call? 
This is ezypzy for me to do when working on Foundation while making a static site but when it comes to WordPress (in this case JointsWP), I find myself in no man's land. 

You commented on bradfranklin 's post about 2 years

@bradfranklin: You're welcome.
 
Here's the link where you can view the development for JointWP5 Beta.
https://github.com/JeremyEnglert/JointsWP/tree/5.0
Foundation v6.3 is currently being used on JointsWP4.
Since JointsWP5 is in Beta mode, I can only hope and presume that a JointsWP 5 stable release will have Foundation v6.4 built into it, which will include the new XY grid. However, I presently see development of JWP5 beta using Foundation v6.3.1

You commented on bradfranklin 's post about 2 years

@bradfranklin, I don't think you need to as JointsWP comes with the flex-grid inbuilt. Seems to work fine with me.
 
 

You commented on Wyeth Myers's post about 2 years

Hi Ryan,
 
Thank you for your replies and I'll incorporate the instructions given by you.
 
I did find a way to increase the height. All I had to do was increase the line-height of:
.top-bar,

.top-bar ul

{

line-height: 65px;

}

.top-bar ul li a{

line-height: 65px;

}

.top-bar ul li a:hover{

line-height: 65px;

}

 
Which still brings me to the horizontal sub-menu for large screens. I've changed the class from vertical to horizontal but still doesn't work.
The reason why I'm being so specific is if I have to build a sub-menu using a horizontal pane full-width using my own CSS, then I might as well use the HTML5 boilerplate instead of Foundation.
One of the reasons I love using Foundation is it saves me a lot of time, however this is one situation which has me literally tearing my hair out. 
 

You commented on Juan David Perafan's post about 2 years

 
Already answered on your other thread.

Posts Followed

Following

  • No Content

Followers