Homepage design changes

Hello,

I would like to do the following:

Remove the green bar on the right side of the slider text area.
Make the slider text box slightly more translusent
Add a color to the background of the website (light brown, green, or blue)
Reduce the whitespace between the slider and the text box below
Reduce the text size of the text below the slider
Be sure my slider is centered

Here is my website www.connectedbirthva.com

 

Hello,

Greetings from InkThemes,

You can resolve it yourself, All you have to do is just go to Dashboard->Appearance->Theme Options->Styling Option->Custom CSS

field and try to cut paste the given below CSS code there .

Code:

.slide .slide-content.entry {
  border-right: 1px solid rgba(186, 186, 186, 0) !important;
}
 
.slide .slide-content.entry {
  background-color: rgba(0, 0, 0, -0.5 ) !important;
}
 
.container {
  background-color: #F2D6C0 !important;
}
 
.content-info h1.title {
  font-size: 25px !important;
  margin-bottom: 5px !important;
  margin-top: -18px !important;
}
 
.slide .slide-content.entry {
  margin-left: 161px !important;
}
 
img.slide-img {
  margin-left: 160px !important;
}

Do let me know if you need further assistance,

 

Hello,

Thank you for this code! The slider is now too far over to the right. I don't love the brown color, but will figure that out on my own. Also, there is too much white space between the logo and the menu. Here is all of the code I have on my site in case something need to change. Thank you again!

.logo img {
max-height: 125px;
}

img.slide-img {
width: 850px !important;

}.slide .slide-content.entry {
border-right: 1px solid rgba(186, 186, 186, 0) !important;
}

.slide .slide-content.entry {
background-color: rgba(0, 0, 0, -0.5 ) !important;

}

.slide .slide-content.entry {
margin-left: 161px !important;
}

img.slide-img {
margin-left: 160px !important;
}

 

I also decided to keep the text of the bar above the four feature images larger but may change that as I move on with designing.

Mandy

 

Looking at it again -- on my desktop, the slider is center, but on my phone it is way too far over to the right.

 

Hello,

Please use the CSS code given below : -

Code:

@media only screen and (max-width: 480px){
#slides .slide-img {
  height: auto !important;
  margin-left: 0 !important;
}
}
@media only screen and (max-width: 767px) and (min-width: 480px){
#slides .slide-img {
  height: auto !important;
  margin-left: 0 !important;
}
}

Thanks,
Praveen