This topic contains 8 replies, has 2 voices, and was last updated by 
wensolutions 2 years, 10 months ago.
-
Posts
-
My website is: http://trifectapa.com/
Question: How to expand the space used for the Site title and tagline on the homepage and remain responsive.Problem: Spacing problem– white space shows up between the top section and the slider, and the tagline is wrapped when doing the following:
On the home-page I’m using all three — logo. Site Title & Tagline. I did not add the logo through your dashboard, but rather I added the logo using the following CSS in child-css file:
.wrap-header{
/* Logo and background color */
background-image: url(“http://trifectapa.com/wp/wp-content/uploads/2016/11/TrifectaLogo1_WebSml-150×145.png”), url(“http://trifectapa.com/wp/wp-content/uploads/2016/11/273544_HeadgBckgrd.jpg”); /* WAS: background-color: #273544; */
background-position: left top, left bottom;
background-repeat: no-repeat, repeat;
background-color: #273544;
}I added the site title and tagline through your dashboard. I changed the CSS in the child css file:
.site-title a{
margin-left: 75px;
}.site-description {
margin-left: 75px;
font-size: 14px;
font-weight: 400;
}.main-navigation {
float: right;
width: 85%;
}Hello @trifectapa_admin,
We have inspected your website and tested the CSS Code that you have been using through the child theme’s style.css.
The codes are working fine as they are supposed to and we could not find the “White Spacing” between header bar and the slider in the website.
Kindly confirm if the issue still exists in the website. Also, it would be easier for us to better understand the issue if you could provide us a screenshot of website, marking the issue so that we can provide you with an precise fix.
Best Regards !!
The tagline, “Home to All Good Things Premium Audit” wraps, which seems to push the section down creating the white space between the menu section and the slider. What I need is to expand the space where the site title and tagline appear so that the tagline doesn’t wrap.
uh-oh it doesn’t seem to create the white space anymore. However, I still can’t figure out how to expand the space where the site title and tagline appear. Also, The title and tagline do not adjust with viewing page with a handheld device.
Hello,
Please kindly explain further your request regarding “expand” the space where title and tagline appear. By the current information, we are not sure if you want the header to be taller for the site title / tagline be aligned vertically or the expansion needs to be horizontal.
Regarding the adjustment of title / tagline in responsive view ( handheld devices ) you can paste in the following custom CSS to resolve the issue :
@media(max-width: 768px){ header.wrap-header .row .col-md-3.col-sm-12.col-xs-9 { float: right; } }Hope this helps,
Best Regards !!
As you can see by looking at the homepage the tagline, “Home to all things…” wraps. I want it to NOT wrap. The image to its left is placed there through using background. I’ve tried every style applied around and within this area and for the life of me I cannot make it wider (not higher).
Hello,
Please paste in the following custom CSS to show the tagline in a single line without breaking in the desktop screens :
@media(min-width:1159px ) { .site-description { width: 100%; } section#evisioncorporatepro-slider { margin-top: -9px; } }Hope this Helps,
Best Regards !!
I applied your css — take a look: trifectapa.com
Hello @trifectapa_admin,
Upon Inspecting your website, we can see that the tagline used in the website is now not breaking into two lines. We assume that is your desired result.
However, even though the CSS we have provided should work only with the larger desktop screen, it looks like it is also loading in smaller screens, please make sure you copied the above CSS including the
@media( min-width: 1159px ).For the resolution of issue of the logo image being cut-off, as the logo is being used as the background image in the header area currently, you will need to add the following CSS for it to fit in the header bar :
.wrap-header { height: 167px; }Please let us know if you have any further queries,
Hope this Helps,
Best Regards !!
You must be logged in to reply to this topic.
