Small size logo

Hi,
Can you please check and see why the logo size is small. It was ok in the old website. I also used max-height, it made it smaller but not bigger. here is the
link
Thank you in advance!

Hi,

Your link only show the coming soon message.

yes, because i have asked it couple of times in the following link and no one answered me. i can’t leave the website opened. it’s 4pm PT now, so i am gonna open it right away until 9:30pm. hope you can get it.
https://forums.athemes.com/t/white-space-between-menu-and-header

Thank you!

please check one more thing, Looks like the logo is ok in mobile ver., but the font on the header slider is bigger than normal in mobile ver. please see the following screenshot.

So, again please check the logo for PC or Laptop size ver. and font on the header slider for mobile ver.

Thanks!

1 Like

Hi,

Here is to manage the logo size:

.site-logo {
    max-width: 200%;
}
@media only screen and (max-width: 991px){
	.site-logo {
    	max-width: 100% !important;
	}
}

Then for the text slider, please firstly remove your current custom CSS for the text-slider and use this code instead:

@media only screen and (max-width: 667px)
.text-slider .maintitle {
    font-size: 18px;
    line-height: 18px;
}
@media only screen and (max-width: 1024px)
.text-slider .maintitle {
    font-size: 20px;
    line-height: 30px;
}

Hope it help :slight_smile:

1 Like

the logo size worked, thank you!

and for the font size i got error:
expected lbrace at 19, col 2
.text-slider .maintitle {
and line 24, col 1
.text-slider .maintitle {

i have to change to the maintenance mode again in 20 minutes

Hi, sorry… should use this:

@media only screen and (max-width: 667px){
  .text-slider .maintitle {
    font-size: 18px;
    line-height: 18px;
  }
}
@media only screen and (max-width: 1024px){
  .text-slider .maintitle {
    font-size: 20px;
    line-height: 30px;
  }
}

Hi Awan,

Thank you! I have actually not got a chance to try it yet because i need to change some colors on the slider first.
I need to change:
1- the color of the header text (with red arrow)
2&3- the color of action buttons (i will choose the color later)
4- the color of action buttons when i want to click on them.

here is the photo:

I am going to open the website until 21:30pm PT.

Thank you in advance!

another question Awan,

there is an employee section in Elementer that social media is on the avatars by default. I didnt find any setting for that, how can i get rid of those?

Regards,
Mehdi

Awan,

I tried the following for the big font size in mobile version but didnt work;
@media only screen and (max-width: 667px){
.text-slider .maintitle {
font-size: 18px;
line-height: 18px;
}
}
@media only screen and (max-width: 1024px){
.text-slider .maintitle {
font-size: 20px;
line-height: 30px;

here is the result:

also please look at the 3 lines on top of the photo (menu bar), i’d like to change the color to “#abac25”. please advise.

I believe i have to leave the website open until tomorrow.

Thanks!

Hi,

Sorry for slow response. I’ve checked your site, looks like you need to use the !important rule to the code and rearrange the CSS block like this:

.text-slider .maintitle {
     color: white !important;
}
@media only screen and (max-width: 1024px){
  .text-slider .maintitle {
    font-size: 20px !important;
    line-height: 30px !important;
  }
}
@media only screen and (max-width: 667px){
  .text-slider .maintitle {
    font-size: 18px !important;
    line-height: 18px !important;
  }
}

Hi Awan,

Thank you, it worked, but it’s still ugly, i will try to customize the font.
Did you read post 10,11, and 12 here? I asked some other questions. (changing the header text color, action buttons colors, mouse hover color on action button, menu 3-lines on mobile version, and the last but not least removing social media icons on employee section with elementor)

Regards,
Mehdi

this part didnt work:

    .text-slider .maintitle {
      color: white !important;
    }

Hi, Here is to change the text color in the slider:

#slideshow .slide-inner h2 span {
    color: white;
}

And this is for the call-to-action button:

#slideshow .slide-inner .roll-button {
    background-color: red;
    border-color: white;
    color: yellow;
}
#slideshow .slide-inner .roll-button:hover {
    background-color: blue;
}

Use this if you want a difference color for the second button

#slideshow .slide-inner .roll-button.accent-2-button {
    background-color: black;
    border-color: yellow;
    color: white;
}
#slideshow .slide-inner .roll-button.accent-2-button:hover {
    background-color: transparent;
}