Build Your Own Business Website header image

Welcome to our Members Only Forum

You are welcome to view the content on our Forum, just scroll down to view this forum post.
If you like what you find and want to be able to post a question, please check out our subscription options.
Please feel free to search the forum using either the Google Site Search above or the forum search below.

Avatar
Search

— Forum Scope —




— Match —





— Forum Options —





Minimum search word length is 3 characters - maximum search word length is 84 characters

sp_Feed sp_TopicIcon
Feature Box - probably basic question
Avatar
Marcy
Jedi
Members

Community Member
Forum Posts: 136
Member Since:
July 25, 2017
sp_UserOnlineSmall Online
1
November 6, 2018 - 6:43 pm
sp_Permalink sp_Print

I'm working on a new site - http://www.desertpipes1.com. I put an image in the feature box, with the wording that came with the theme, and it looked fine. I took out the words because I only wanted the image and the height of the box shrunk a lot.

How do I put in just an image and the Free Consultation button below it, both in the feature box, with no header or message text? I have a feeling this is easy, I just can't figure it out.

Thanks,
Marcy

Avatar
Rick Anderson
Desert Hot Springs, CA
Admin
Forum Posts: 13616
Member Since:
November 8, 2009
sp_UserOfflineSmall Offline
2
November 10, 2018 - 2:18 pm
sp_Permalink sp_Print

I'd switch the Feature Box from a call to action box to a widget area an then just use a text widget

Avatar
Marcy
Jedi
Members

Community Member
Forum Posts: 136
Member Since:
July 25, 2017
sp_UserOnlineSmall Online
3
November 16, 2018 - 3:19 pm
sp_Permalink sp_Print

I'm having a tough time with this one. It was a Call to Action (which showed 425 of my 510 pixels high photo and all of the 1040 pixel width), and had the default header and message.

I changed it to a widget. Now only 165 of the 510 height pixels are showing. The photo does not fit the width.

I was able to get the button to work.

I made a new photo that is 1080 (the width with padding) and 607 pixels tall. Now the photo fits even worse.

So...

1) How do I get the photo to fit the width and show the full height?

2) How do I get the button to move down? I'd like it below the tile words.

3) How do I get the photo to be responsive? It's not at the moment.

Thanks,
Marcy

Avatar
Keith W Jones
Somerset, UK
Member
Members

Community Member
Forum Posts: 1359
Member Since:
June 22, 2013
sp_UserOfflineSmall Offline
4
November 23, 2018 - 9:25 am
sp_Permalink sp_Print

It looks to me as though that image has been added as a background in css. If that is the case it will not be responsive. 

Keith

Keith W Jones
Make sure you backup before upgrading and making changes.
Best results when one question per thread, link to site, version of WP, Thesis and skin.
http://www.kwjassociates.co.uk - Wordpress 4.9.8 – Thesis 2.6.4 - Pearsonified 1.3
Avatar
Keith W Jones
Somerset, UK
Member
Members

Community Member
Forum Posts: 1359
Member Since:
June 22, 2013
sp_UserOfflineSmall Offline
5
November 23, 2018 - 9:30 am
sp_Permalink sp_Print

Looking at it again, I would remove the image as it is.

That will raise 

Ready to Get Unstuck? If so, let us introduce you to ways to help you get unstuck! 

 

up the page. 

Then code the image with button underneath, above that text.

Keith 

Keith W Jones
Make sure you backup before upgrading and making changes.
Best results when one question per thread, link to site, version of WP, Thesis and skin.
http://www.kwjassociates.co.uk - Wordpress 4.9.8 – Thesis 2.6.4 - Pearsonified 1.3
Avatar
Marcy
Jedi
Members

Community Member
Forum Posts: 136
Member Since:
July 25, 2017
sp_UserOnlineSmall Online
6
November 30, 2018 - 10:52 am
sp_Permalink sp_Print

Keith,

It is a background image in the Feature Box Area Page Background under Backgrounds in Skin Design. I thought that should have made it responsive.

My client for this website would rather the Feature Box stay where it is if that is at all possible.

Rick suggested I change the Feature Box content to a widget. That changed the dimensions of that area even more. So now I'm not sure what I need to do to fix it.

Thanks,
Marcy

Avatar
Keith W Jones
Somerset, UK
Member
Members

Community Member
Forum Posts: 1359
Member Since:
June 22, 2013
sp_UserOfflineSmall Offline
7
November 30, 2018 - 12:20 pm
sp_Permalink sp_Print

Marcy

Is one of the issues that the image is too small in width?

Keith

Keith W Jones
Make sure you backup before upgrading and making changes.
Best results when one question per thread, link to site, version of WP, Thesis and skin.
http://www.kwjassociates.co.uk - Wordpress 4.9.8 – Thesis 2.6.4 - Pearsonified 1.3
Avatar
Marcy
Jedi
Members

Community Member
Forum Posts: 136
Member Since:
July 25, 2017
sp_UserOnlineSmall Online
8
November 30, 2018 - 1:32 pm
sp_Permalink sp_Print

Keith,

No, the width is fine. I made sure it is 1140 - the same size as the Feature Box without padding.

The issues are 1) the height and 2) the responsiveness.

I actually changed the Feature Box Page background images to one that Rick included with Agility, and that one did not work either. I'm thinking it might have something to do with the fact that I change the Skin Content from a Call to Action (because I did not want the words over the photo) to a widget area. If that is the case, any idea what happened? I'm at a loss.

I'm hoping Rick hops on here at some point also because he may have some other insight.

Thanks,
Marcy

Avatar
Marcy
Jedi
Members

Community Member
Forum Posts: 136
Member Since:
July 25, 2017
sp_UserOnlineSmall Online
9
November 30, 2018 - 2:06 pm
sp_Permalink sp_Print

Keith,

A PS - I meant no disrespect to you with my comment about Rick weighing in. I really appreciate your help.

Marcy

Avatar
Keith W Jones
Somerset, UK
Member
Members

Community Member
Forum Posts: 1359
Member Since:
June 22, 2013
sp_UserOfflineSmall Offline
10
November 30, 2018 - 3:09 pm
sp_Permalink sp_Print sp_EditHistory

I think the image is only 1012px and 1080px zoom-out?

Keith

Keith W Jones
Make sure you backup before upgrading and making changes.
Best results when one question per thread, link to site, version of WP, Thesis and skin.
http://www.kwjassociates.co.uk - Wordpress 4.9.8 – Thesis 2.6.4 - Pearsonified 1.3
Avatar
Marcy
Jedi
Members

Community Member
Forum Posts: 136
Member Since:
July 25, 2017
sp_UserOnlineSmall Online
11
November 30, 2018 - 4:07 pm
sp_Permalink sp_Print

Keith,

I'm not sure what you mean by zoom-out.

According to Photoshop it is 1180 px wide and 664 px tall.

I see what you mean about it looking like it is larger than the page area. In the Inspect Element, when I hover over the Feature Box Page Area, the image is longer than the area that is highlighted. I checked and I definitely put in the Feature Box Page area backgound box, so I'm not sure how it got longer than the page area.

Do you think maybe the fact that I changed the content from call to action to a widget would change the background somehow?

Marcy

Avatar
Marcy
Jedi
Members

Community Member
Forum Posts: 136
Member Since:
July 25, 2017
sp_UserOnlineSmall Online
12
November 30, 2018 - 4:13 pm
sp_Permalink sp_Print

I had a thought. Might this work if I put both the image and the button in the Feature Box widget, an image widget box and then an html box with a background color and the button below the image one? This seems like it would either work or I'd break everything, so I thought I'd get an opinion here first.

Thanks!

Avatar
Keith W Jones
Somerset, UK
Member
Members

Community Member
Forum Posts: 1359
Member Since:
June 22, 2013
sp_UserOfflineSmall Offline
13
December 1, 2018 - 3:48 am
sp_Permalink sp_Print

Thought I had put this up before, try this in custom css and see if that is getting close to what you want. 

#feature_box_area .columns_1, #feature_box_area .columns_1 .full {
padding-bottom: 200px;
}

Keith

Keith W Jones
Make sure you backup before upgrading and making changes.
Best results when one question per thread, link to site, version of WP, Thesis and skin.
http://www.kwjassociates.co.uk - Wordpress 4.9.8 – Thesis 2.6.4 - Pearsonified 1.3
Avatar
Marcy
Jedi
Members

Community Member
Forum Posts: 136
Member Since:
July 25, 2017
sp_UserOnlineSmall Online
14
December 1, 2018 - 10:33 am
sp_Permalink sp_Print sp_EditHistory

Keith,

I found a different css code last night - height - before I got your response.

I got the feature area to look exactly how I want it to look using a lot of css:

/*To change the Free Consultation link in the Feature Box Area into a button and put it where I want it*/

#feature_box_area.area_wrapper div.page_wrapper div.columns_1 div.full div#text-13.widget.widget_text div.textwidget p.cta_submit.pum-trigger a {

background-color:#7c0200;
font-size: 28px;
color: white;
padding:12px 12px;
border-radius:5px;
border-color: #7c0200;
box-shadow: 3px 3px 3px #707070;
text-align: center;
display: block;
margin-left: auto;
margin-right: auto;
width: 30%;
margin-top: 410px;

}

#feature_box_area.area_wrapper div.page_wrapper div.columns_1 div.full div#text-13.widget.widget_text div.textwidget p.cta_submit.pum-trigger a:hover {

background-color:#005496;
color: #fff;
text-decoration: none;

}

/*Feature Box height code.*/

#feature_box_area .page_wrapper {

height: 520px;

}

 

The only thing I can't figure out now is how to make the Feature Box responsive. The rest of the site is. I tried adding:

#feature_box_area .page_wrapper .responsive {

width: 100%;
height: auto;

}

It did not work. Any ideas on what I did wrong? I probably forgot something, but I'm not good enough at coding to know what.

Thanks,
Marcy

Avatar
Keith W Jones
Somerset, UK
Member
Members

Community Member
Forum Posts: 1359
Member Since:
June 22, 2013
sp_UserOfflineSmall Offline
15
December 1, 2018 - 11:53 am
sp_Permalink sp_Print

My understanding is that you can not make background images responsive. 

You could write a media query to improve the look om smaller screens but that is going to be quite complex.

Keith

Keith W Jones
Make sure you backup before upgrading and making changes.
Best results when one question per thread, link to site, version of WP, Thesis and skin.
http://www.kwjassociates.co.uk - Wordpress 4.9.8 – Thesis 2.6.4 - Pearsonified 1.3
Avatar
Marcy
Jedi
Members

Community Member
Forum Posts: 136
Member Since:
July 25, 2017
sp_UserOnlineSmall Online
16
December 1, 2018 - 1:51 pm
sp_Permalink sp_Print sp_EditHistory

Keith,

It is just the Feature Box. Everything else is fine.

I've heard of media queries. I just need it for that element and for phone sizes. I'll look that up. 

Thanks,
Marcy

Avatar
Marcy
Jedi
Members

Community Member
Forum Posts: 136
Member Since:
July 25, 2017
sp_UserOnlineSmall Online
17
December 1, 2018 - 4:31 pm
sp_Permalink sp_Print

OK - I'm thinking back to my original issue with all this.

What might be the reason that the Feature Box would not display the full photo and would not be responsive? I've come so far from that, I'm thinking I should go back to the original way Rick set this up and start over.

What I want there is a photo with a call to action button on the lower part of the photo that is responsive. I don't need the Call to Action Header or text that goes with it.

Thanks,
Marcy

Avatar
Keith W Jones
Somerset, UK
Member
Members

Community Member
Forum Posts: 1359
Member Since:
June 22, 2013
sp_UserOfflineSmall Offline
18
December 2, 2018 - 2:30 am
sp_Permalink sp_Print

I still say image is too small. 

Going back to original is probably a good idea. But the image will not be responsive. There are ways around that with media queries.

I refer you back to my second post with a suggestion of how to easily make it responsive.

Keith

Keith W Jones
Make sure you backup before upgrading and making changes.
Best results when one question per thread, link to site, version of WP, Thesis and skin.
http://www.kwjassociates.co.uk - Wordpress 4.9.8 – Thesis 2.6.4 - Pearsonified 1.3
Avatar
Marcy
Jedi
Members

Community Member
Forum Posts: 136
Member Since:
July 25, 2017
sp_UserOnlineSmall Online
19
December 4, 2018 - 1:24 pm
sp_Permalink sp_Print

Keith,

I suggested that to the site owner, but he wants the photo and the button above the title. I'm using Gutenberg on this site, and the top block on any page with the page title in it is fixed as far as I can tell.

I'm trying to figure out how to do a media query for the feature box and its contents that I can use in the Media section of the Skin Design.

I'm still not sure why an image that was put in the Feature Box Page Area in the Skin Design would not be responsive. That has me shaking my head some. I thought Rick had designed all the Skin Design areas to be responsive.

I'll keep at it and see what I can figure out.

Thanks,
Marcy

Avatar
Marcy
Jedi
Members

Community Member
Forum Posts: 136
Member Since:
July 25, 2017
sp_UserOnlineSmall Online
20
December 4, 2018 - 2:53 pm
sp_Permalink sp_Print

I have another site where I was able to make changes to certain areas just for the smart phone portrait by using the Skin Design Media Query. I used the exact same thing on desertpipes1.com and it did not work.

Shouldn't this change the background of the feature box to that green color?

#feature_box_area .page_wrapper {
background-image:none;
background-color: #144983;
}

Any ideas as to why it didn't? This is exact same code I used on another site to take out the background image for a phone.

Thanks,
Marcy

Forum Timezone: America/Los_Angeles

Most Users Ever Online: 228

Currently Online: Marcy
7 Guest(s)

Currently Browsing this Page:
1 Guest(s)

Top Posters:

Keith W Jones: 1359

Brian Tozer: 1004

Carolin: 979

Heidi Hafner: 466

John Cunningham: 422

Reece Morrel: 353

Newest Members:

David

Dina Jokanovic

kwitchey

Kirk Ewing

Md Saifullah

Ian Birch

Forum Stats:

Groups: 8

Forums: 46

Topics: 6942

Posts: 34509

 

Member Stats:

Guest Posters: 6

Members: 6743

Moderators: 2

Admins: 2

Administrators: Rick Anderson, Rick Anderson

Moderators: Pierre Cote, Laura Nugent