Bottom 2 some fileds responsive

Hi,
In my bottom 2 I added a module (jinc newsletter) inside the custom html contact module.
I'm interested in making this part Responsive and when minimize the screen I see the submit button collapses the input email field. How can I convert it into responsive submit button?

Also the text after the newsletter form I don't know why moves to the right, it seems like it has a margin but it doesn't.

Any help is appreciated!

Thanks in advance,

Kind Regards.

Could You please share an url to your site?

Sure, the url http://tiendanueva.negre.es/

Please edit: /templates/gk_storebox/css/override.css and add at its end:

Code: Select all

.jinc_mod_frm_subscription {width: 100%;}


Remember to enable "CSS override" in template settings - advanced section.
That should do the trick.

Thank you Cyberek,
I want to study about Responsive design although I think is difficult: it is bassically working with percents (%) and setting the different screen devices? There are some websites I will turn into responsive once I learn the bassis.

Also, regarding our bottom, any idea why the "email" follows the button? it has no margin and is positiones on the left...if I only could know why it happens?

To make use of this topic I want to ask:
I need to insert the payment logos in the bottom (below the three columns) in a horizontal line.
I don't know if its better to create a module position or to create a div under the columns, what would you recommend for this?

Kind Regards,

There is a "float bleeding" that affects elements under "the form" - if You will look closer, email is floated to the side of input element.
You can fix that in two ways. Simple:

Code: Select all

.jinc_mod_frm_subscription {overflow: hidden;}


or more complicated - by adding a dummy element (eg. div) with clear:both style just before <address> element.

Hi Cyberek, thank you very much, it seems the overflow:auto did the trick!
Also regarding the question for the horizontal div I need:
I need to insert the payment logos in the bottom (below the three columns) in a horizontal line.
I don't know if its better to create a module position or to create a div under the columns, what would you recommend for this?

Kind Regards,

Creating aditional position or using existing one (if any fits) and placing custom html module there should be the easiest way.

Hi Cyberek,
Looking for the bottom 2 content I've found this

Code: Select all

      
       <?php if($this->API->modules('bottom2')) : ?>
       <div id="gkBottom2">
          <div class="gkCols6<?php if($this->API->modules('bottom2') > 1) : ?> gkNoMargin<?php endif; ?> gkPage">
             <jdoc:include type="modules" name="bottom2" style="<?php echo $this->module_styles['bottom2']; ?>" modnum="<?php echo $this->API->modules('bottom2'); ?>" />
             
             <!--[if IE 8]>
             <div class="ie8clear"></div>
             <![endif]-->
          </div>
       </div>

but I see I need to insert html content down the
.box.gkmod-4 modules and didn't found where they are located.

I would need to create another module position responsive down that three modules: Sobre Negre,Servicio al cliente and Redes sociales.

Thank you,
Kind regards,

Please let me know how do I add a div down the three columns in the bottom, see http://tiendanueva.negre.es/
I need to include the payment logos there, down the columns called Sobre Negre,Servicio al Cliente and Redes Sociales. None of the modules set for the template are in this horizontal position.
If I have to create one new module position, which one is the file to edit?

Thanks in advance,
Kind Regards,

For adding another module, You should read this documentation:
http://www.gavick.com/documentation/joo ... -position/

but checking module positions:
http://demo.gavick.com/joomla25/storebo ... -positions
bottom1 and bottom2 are horizontal modules.
You can post more than one module in one module position.

Hi Cyberek,
I tried to post the module into the bottom2 position but I need it displayed horizontally, not vertically.
Is the module with the font weight bold and the payment cards, the last one column on the right.
http://tiendanueva.negre.es/

I have tested this solution that gives result, as I understand desired:
Please edit: /templates/gk_storebox/css/override.css and add at its end:

Code: Select all

#gkBottom2 div.gkmod-5:last-child {width: 100%;}
#gkBottom2 div.gkmod-5:last-child img {padding: 0 5px 0 0;}
#gkBottom2 div.gkmod-5:last-child img:last-child {padding: 0;}


Then remove spaces between pay method logos, as they were added with css.

Remember to enable "CSS override" in template settings - advanced section.

Hi Ciberek,
it did the trick! Awesome! Thanks a lot!
Would it be possible to display it above instead of bottom side of this module?

Kind regards,

I think yes, just change it to be first module in that position instead last, and in CSS code change to

Code: Select all

#gkBottom2 div.gkmod-5:first-child {width: 100%;}
#gkBottom2 div.gkmod-5:first-child img {padding: 0 5px 0 0;}
#gkBottom2 div.gkmod-5:first-child img:last-child {padding: 0;}


Hi Cyberek,
Absolutely asesome, it did the trick!

Thank you very much!

Kind regards.