Pulling My Hair Out – Border Help

Homepage › Community Forums › Aspire Theme Support › Pulling My Hair Out – Border Help

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • June 18, 2017 at 3:41 pm #21585
    jamesc8913
    Customer

      Hi Wes, I’m going nuts here. Been working on this for hours. Please see the included screenshot. I’m trying to create a table with 3 images side by side. Seems very simple. However, there is this awful white border line around them and I cannot figure out how to remove it. Do you have any ideas on how I can do this?
      Border

      June 18, 2017 at 3:42 pm #21586
      jamesc8913
      Customer
        This reply has been marked as private.
        June 18, 2017 at 3:52 pm #21587
        Wes
        Moderator

          What’s the link to your site again?

          June 18, 2017 at 3:58 pm #21588
          Wes
          Moderator

            Nevermind, I see it in the screenshot.

            The borders are coming from line 571 in your style.css file – 

            /* ## Tables
--------------------------------------------- */

table {
	border-collapse: collapse;
	border-spacing: 0;
	line-height: 2;
	margin-bottom: 40px;
	width: 100%;
}

tbody {
	border-bottom: 1px solid #ddd;
}

td,
th {
	text-align: left;
}

td {
	border-top: 1px solid #ddd;
	padding: 6px 0;
}

th {
	font-weight: 300;
}

            Have you tried using the .one-third div/class? That would be much easier and more consistent to deal with. It works consistently on multiple browsers, and is designed to shrink to one column on smaller browsers like mobile devices and tablets.

            Here’s an example where I added them in using the one-third div class – 

            <div class="one-third first">
<img src="http://responsiblyboundless.com/wp-content/uploads/2017/06/best-travel-gear-for-back-packing-1.jpg">
</div> 

<div class="one-third">
<img src="http://responsiblyboundless.com/wp-content/uploads/2017/06/best-travel-gear-for-back-packing-1.jpg">
</div> 

<div class="one-third">
<img src="http://responsiblyboundless.com/wp-content/uploads/2017/06/best-travel-gear-for-back-packing-1.jpg">
</div>

            Which will look like this (look at the Top 3) – http://i.imgur.com/HM7L8XY.png

            June 18, 2017 at 4:41 pm #21590
            jamesc8913
            Customer

              Oh my gosh! It’s so close. Okay, how can I tighten up the padding between the images?

              June 18, 2017 at 4:42 pm #21591
              jamesc8913
              Customer

                Also, a small part of the bottom of the image is cut off…

                June 18, 2017 at 5:28 pm #21592
                Wes
                Moderator

                  The space in between is due to the width on line 769 and the margin-left on 759 – 

                  /* ## Column Classes
--------------------------------------------- */
/* Link: http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css */

.five-sixths,
.four-sixths,
.one-fourth,
.one-half,
.one-sixth,
.one-third,
.three-fourths,
.three-sixths,
.two-fourths,
.two-sixths,
.two-thirds {
	float: left;
	margin-bottom: 40px;
	margin-left: 2.564102564102564%;
}

                  But if you change it for one, you change it for all. So just add something like this if you’re going to change it just for that section – 

                  .front-page-9 .one-half {
    margin-left: (add your % here) 
}

                  “Also, a small part of the bottom of the image is cut off…”

                  If you look at the images directly – http://responsiblyboundless.com/wp-content/uploads/2017/06/best-travel-gear-for-back-packing-1.jpg you can see that they are showing the full image. Your image is more wide than it is tall, so that’s probably why it may look weird at that size…..but it’s definitely showing the full image.

                  June 18, 2017 at 6:59 pm #21593
                  jamesc8913
                  Customer

                    Thank you Wes!

                  • Author
                    Posts
                  Viewing 8 posts - 1 through 8 (of 8 total)
                  • The topic ‘Pulling My Hair Out – Border Help’ is closed to new replies.