Announcement

Collapse
No announcement yet.

Custom Widget Spacing/Position

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Custom Widget Spacing/Position

    URL: themissinghow.com

    I originally created the page perfectly with an EZ Static Home Page of 132.

    However, I needed some more widget areas so I created 7 custom widgets called "home_1", "home_2" etc.

    I then repopulated the widget content and used the id "#home_1" etc to format the widgets. Unfortunately I can't quite get the spacing right.

    Issues:

    #home_2 background should be #F5F5F5, but it's not showing up correctly. I basically want a solid block background, like it's a separate row.

    #home_6 and #home_7 spacing is not right. I would like for the featured images to be side by side, about 30-60px apart, and centered. I believe the image size will be 320px wide. Because I'm using <div class="one-half first"></div> I think it's spacing it out wrong.

    Any help with these 2 issues would be awesome.

  • #2
    We would need to have a URL so we can look at it.
    At this point though (when you´re in need of 7 rows instead of just 3), I´d consider to use a pagebuilder - all the content accessible in one place, no coding and you can easily swap rows when needed.

    Comment


    • #3
      SiGa I posted a URL.

      I don't use page builders b/c they slow down the page significantly (i.e. I've tested Beaver Builder multiple times and it's adding 1-2s on load speed).

      Comment


      • #4
        You would have to

        - Create your custom widgets in a way that you have an additional wrap inside so the outer box can go full width and the wrap with the content is centered with a max width (think we had threads in the past how to do that)
        - Write all the related CSS to make that work
        - I do not see #home-7 and #home-6 is thirds. The spacing seems OK there...?

        But generally: If the Genesis classes you use there (half, third,...) don´t provide what you need, you would have to create your individual solution which involves writing custom CSS.

        I´m sure you´ll understand that we often provide general advice, search results and some CSS snippets here (if time allows), but usually we don´t provide all the code needed to build a whole custom frontpage / individual solutions....

        I don't use page builders b/c they slow down the page significantly (i.e. I've tested Beaver Builder multiple times and it's adding 1-2s on load speed).
        Depends on the pagebuilder, but mostly on the content you put on a page using it. Building a site right now and currently, on the frontpage, the BB builder adds
        - 7kB script (gzipped)
        - 12,3 kB CSS (gzipped)
        which makes for 220 ms loading time. And that's all - this is not even optimized yet. BB does a pretty good job in NOT adding more than it takes (and caching its stuff).

        Of course, if you choose to go crazy with large background pics (not optimized probably), parallax, animations and the like, and the pagebuilder will add the additional CSS and scripts needed while you do so. Those are the things that will make for 1-2 secs additional loading time (that is also server-dependend, btw), but in my eyes, a pagebuilder is not be blamed for content, pics (I often see people using multiple 1MB background pics) or shebang added. That is always a choice.

        EDIT: This is a test result for my Amare demo site (Beaver Lite page with three large background pics and animations, no cache plugin (except standard BB cache), no additional optimization, shared hosting - just working with optimized images right from the beginning, if you´re interested. https://sg-demo.com/amare-basic/beaver-rows/
        That whole page including all images is 500 kB only.

        Amare.JPG
        Last edited by SiGa; 12-03-2017, 04:41 PM.

        Comment


        • #5
          If anyone comes to this thread looking for an answer in the future, this is what I did:

          Code:
          #home_2, #home_3 {
              overflow: hidden;
              margin: 0 auto;
              padding: 40px 120px 0 120px;
              background: #F5F5F5;
              margin-bottom: 0;
          }
          It was the overflow:hidden that fixed the problem.

          Comment

          Working...
          X