Canvas Support

How to get rid of white spaces between Section and sone Containers

6 replies · opened Apr 15, 2016

VvictorstanApr 15, 2016

Hello. Please excuse the possible noob question, my HTML skills are 1.5/10 so I'm struggling to understand some aspects of how the website is built. I simply edited the example pages to suit my needs and also copy/pasted elements from other example pages and shortcodes in order to assemble the website that I want. However, I am getting some strange behaviour such as horizontal gaps between sections and left and right padding on the image when using the parallax transparent header.

Any help is appreciated, I attached a screenshot to show what I mean and here is a link to the page I am trying to finish building: http://victorstan.me/ACTIVATOR/servicii.html

I assume the issue with the picture is its width being 917px, so how do I stretch it to fit any page resize?

Thank you kindly,

Victor

VvictorstanApr 15, 2016

Second screenshot.

SSemicolon WebSTAFFApr 15, 2016

Hello,

  1. You can simply add the Helper Classes .notopmargin and .nobottommargin to the .section Elements to remove the Margin between the Sections.

  2. Simply add the background-size: cover; CSS Property to the Element you are adding the Background Image on.

This will definitely work fine. Let us know if we can help you with anything else or if you find any further issues. Thanks. :)

VvictorstanApr 17, 2016

Hi. Thank you so much for your fast reply and your help. I managed to fix the header image, and I added the helper classes to every section and div I had in the page and the white space got smaller, but it's still there, I can't get rid of it. I checked the code over and over again for unclosed containers and everything looks ok. I will re-upload the page for you to take a look if you can, here is the link again: http://victorstan.me/ACTIVATOR/servicii.html

Yes, I have a few more questions. The first one is how can I see all the icons included in the template and see their class name so that I can add them in various places. I managed to open all the SVG files in Icomoon app, but not all icons have class names attached most are untitled. So for example I want to edit this line: `

  • ` and replace the time icon with an icon that is present in the svg files, but has no name. One good example is the different variants of similar icons found in font-icons.svg and lined-icons.svg. If I use the icon-checkmark it only refers to one type, but I want to use the other type which is thinner and so on.

And last but not least, I am trying to combine 2 different tabs. I have a tabbed menu inside a page that uses the Alternate Navigation Style and I want to add a Dropdown menu, like the one found in Bootstrap or Pill Navigation Style. I managed to do it easily, but the problem I have is that the dropdown menus keep their own styling and not use the styling of the original tabs it is placed in. I only copied the `

  • ` that has the dropdown, nothing else. I'll screenshot this for easier understanding.

Oh just remembered. I tried adding the Google Map widget to a page and it doesn't render. Any idea what might be causing it? I left it untouched, did not modify or edit anything.

Thank you so much for all your help.

Sorry about the message above, I forgot to put code into tags :)

SSemicolon WebSTAFFApr 18, 2016

Hello,

  1. Since you are using the .section Container inside the .content-wrap Container, you will need to add the .nobottommargin Class to the .section Container and .nobottompadding Class to the .content-wrap Container.

  2. You can find the List of all the Included Icons in the Documentation > Shortcodes > Icons Section.

  3. Currently jQuery UI Tabs and Bootstrap Dropdowns are not compatible with each other since they run on Different jQuery.

  4. Please make sure that you have added the Google Maps JS API on the Page:

This will definitely fix your issue.

Let us know if we can help you with anything else or if you find any further issues. Thanks. :)

VvictorstanMay 18, 2016

Hi SCW.

Thank you for all the help. Yes this solved my issues. The map is still not loading, but I am not testing the page on the server, I have set it up using MAMP right now so that might be an issue.

However I do have some trouble with an under construction page for the website until it's ready.

Here is the website: http://www.activator.ro

The problem is that the Subscribe widget is giving me an error "Resource not found" when trying to input an email. I did configure the widget to work with mailchimp api. I read it might be something to do with .htaccess or some server privileges. Do you have any idea why it won't execute the subscribe.php file?

That and I added 2 social media icons in the top right corner which don't always render on some browsers. It looks fine on Safari, but sometimes they will render on Chrome and sometimes it won't. I tried it on 3 different computers and a mobile browser as well. I did place them in this container because it was already created on that page (I edited coming-soon-2.html):

``

Thank you so much for all the help. I will probably hire someone with more experience to help me finish it, so thanks for all the help so far.

SSemicolon WebSTAFFMay 20, 2016

Hello,

We have checked out your Website and Can you please provide us with a Live URL of the Sample Page with the Mailchimp Subscription Form so that we can test it out Live and try out finding the exact issue with this. Thanks for your Patience.

The Social Icons appeared to be working fine for us. we have tried checking this out on Several Browsers and devices and it worked for us every single time. It appears to be a Cache Issue. Can you please try checking this out on a Different Internet Connection. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard