Homepage boxes

  • cathlisting

    (@cathlisting)


    8 years, 1 month ago

    Hi all
    I am updating this site and having a few problems with the css
    I have added three new boxes to the homepage sidebar and they are showing with no image, and the text breaching the margins of the box

    In the stylesheet we have:

    #sidebar-box {
	width: 86%;
	height: 30px;
	padding: 150px 7% 0;
	display: block;
	border: 1px solid #ccc;

.address-essex {
	background: #fff url(imgs/address-book-elements-lite-icon_My1UeT8u_L (1).jpg)no-repeat top center;
}

    Then in the widget itself:

    <a href="/Essex Colonic Irrigation Clinic" id="sidebar-box" class="essex-address">
<h3>Willow Herbal Centre, Essex</h3>
</a>

    I would be grateful for any pointers on how the boxes can render correctly!
    Thank you

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Naveen Kharwar

    (@naveenkharwar)

    8 years, 1 month ago

    Hey 👋
    For background image try this
    background-image: url("http://example.com/wp-content/uploads/2017/03/your-background-image.jpg");

    Thread Starter cathlisting

    (@cathlisting)

    8 years, 1 month ago

    I’m afraid that isn’t picking up either – but thank you for coming back to me

    Naveen Kharwar

    (@naveenkharwar)

    8 years, 1 month ago

    It’s Okay No problem. 🙂

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    8 years, 1 month ago

    First, your CSS class is this:

    
.address-essex

    But your HTML class is this:

    
<a href="..." class="essex-address"> ... </a>
    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    8 years, 1 month ago

    And second the background image url needs to be relative to the root (root starts with forward slash), like so:

    
background-image: url('/path/to/image);

    Where is your image??

    Thread Starter cathlisting

    (@cathlisting)

    8 years, 1 month ago

    Ahh thank you Andrew for picking up that schoolgirl error (spot the difference on a Monday morning..)
    The image url:
    /wp-content/uploads/2018/04/address-book-elements-lite-icon_My1UeT8u_L-1.jpg

    .address-essex {
	background: #fff url("/wp-content/uploads/2018/04/address-book-elements-lite-icon_My1UeT8u_L-1.jpg") no-repeat top center;
}
    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    8 years, 1 month ago

    That’s okay, great looks like the path is working but the size is incorrect.

    You could make the size of the image the appropriate size, in fact that’s the best solution because the image at the moment is 3000px-wide, whereas the space it needs to fill is only 188px. This should reduce the load time of your page.

    The other solution is to resize it with CSS like so:

    
.address-essex {
	background: #fff url("/wp-content/uploads/2018/04/address-book-elements-lite-icon_My1UeT8u_L-1.jpg") no-repeat top center;
        background-size: 100%;
}
Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Homepage boxes’ is closed to new replies.