Hero image not fixed size

Hello!
As seen on https://www.drphysio.gr/γενικές-παθήσεις/οστεοπόρωση/ the hero image is cut from above (the old womans head disappeared) and on this page https://www.drphysio.gr/άνω-άκρα/ασβεστοποιός-τενοντίτιδα-ώμου/ the hero image is almost full.
The settings for every siteorigin hero widget is the same but I think the height of the image depends from the amount of the letters/sentences/paragraph.
Also the dimensions of each image is 1280x503 and is the desired dimension that I want to be displayed.
How th fix that?
Thank you in advance!!!

Hi,

You can add this CSS code below to Customize > Additional CSS to fix the issue

@media and (min-width: 992px){
   .sow-slider-image {
       min-height: 500px;
   }
}

Hello awan and thank you for the reply!
I think that there is a mistake in the code you proposed because the customizer does not accept it.
Thank you in advance!

Hi,

Can you describe why the customizer doesn’t accept the code? Is there any errors in the customizer? if yes, can you share all codes in your customizer > additional CSS?

CSS code is:

/*
You can add your own CSS here.

Click the help icon above to learn more.
*/
#mainnav #menu-item-1884 {
padding-left: 30px !important;
}

#menu-item-1884 a {
border: 1px solid #ff3314;
padding: 2px 20px;
border-radius: 3px;
transition: all 0.3s;
background-color: #ff3314 !important;
font-family: “Raleway”, sans-serif !important;
font-size: 13px !important;
line-height: 15px;
font-weight: 700 !important;
text-transform: none;
}
#menu-item-1884 a:hover {
background-color: #ff3314 !important;
color: #fff !important;
}
/*
το padding ηταν 12px,35px
το line height ηταν 24px
/
/

ΑΥΤΟ ΕΙΝΑΙ ΤΟ BUTTON HOVER
#menu-item-1884 a:hover {
background-color: transparent !important;
}

/
.footer-widgets {
padding: 20px 0;
}
/
το παρακατω ειναι για τα buttons των υπηρεσιων */
[role=button] {
border-radius: 5px;
font-weight: bold;

}
/* το παρακατω ειναι για το κενο κατω απο menu και πανω απο footer
*/
.page-wrap {
padding: 0 !important;
}

.home .entry-header {
margin-bottom: 0 !important;
}
#pl-7652 .lsow-hero-header {
margin-top: 0 !important;
}

The errors are:
Expected LBrace at line 58,col 12
Unexpected token ‘(’ at line 58 col 12
Expected a ‘FUNCTION’ or ‘IDENT’ after colon at line 58 col 22

Thank you in advance!

Thank you.

The error caused by the line that contain only / character

Please note that if you want to disable the code, you need to wrap the code with /* and */

Here is the fixed code:

/*
You can add your own CSS here.

Click the help icon above to learn more.
*/
#mainnav #menu-item-1884 {
padding-left: 30px !important;
}

#menu-item-1884 a {
border: 1px solid #ff3314;
padding: 2px 20px;
border-radius: 3px;
transition: all 0.3s;
background-color: #ff3314 !important;
font-family: "Raleway", sans-serif !important;
font-size: 13px !important;
line-height: 15px;
font-weight: 700 !important;
text-transform: none;
}
#menu-item-1884 a:hover {
background-color: #ff3314 !important;
color: #fff !important;
}
/*
το padding ηταν 12px,35px
το line height ηταν 24px

ΑΥΤΟ ΕΙΝΑΙ ΤΟ BUTTON HOVER
*/
#menu-item-1884 a:hover {
background-color: transparent !important;
}


.footer-widgets {
padding: 20px 0;
}
/* το παρακατω ειναι για τα buttons των υπηρεσιων */
[role=button] {
border-radius: 5px;
font-weight: bold;

}
/* το παρακατω ειναι για το κενο κατω απο menu και πανω απο footer
*/
.page-wrap {
padding: 0 !important;
}

.home .entry-header {
margin-bottom: 0 !important;
}
#pl-7652 .lsow-hero-header {
margin-top: 0 !important;
}

Hello again…

Here is the new CSS code you provided plus the new code for the hero image dimensions at the end of the code

/*
You can add your own CSS here.

Click the help icon above to learn more.
*/

#mainnav #menu-item-1884 {
padding-left: 30px !important;
}

#menu-item-1884 a {
border: 1px solid #ff3314;
padding: 2px 20px;
border-radius: 3px;
transition: all 0.3s;
background-color: #ff3314 !important;
font-family: “Raleway”, sans-serif
!important;
font-size: 13px !important; line-height: 15px;
font-weight: 700 !important;
text-transform: none;
}

#menu-item-1884 a:hover {
background-color: #ff3314 !important;
color: #fff !important;
}
/*
το padding ηταν 12px,35px
το line height ηταν 24px

ΑΥΤΟ ΕΙΝΑΙ ΤΟ BUTTON HOVER */
#menu-item-1884 a:hover {
background-color: transparent
!important;
}

.footer-widgets {
padding: 20px 0;
}
/* το παρακατω ειναι για τα buttons των υπηρεσιων */
[role=button] {
border-radius: 5px;
font-weight: bold;

}
/* το παρακατω ειναι για το κενο κατω απο menu και πανω απο footer
*/
.page-wrap {
padding: 0 !important;
}

.home .entry-header {
margin-bottom: 0 !important;
}
#pl-7652 .lsow-hero-header {
margin-top: 0 !important;
}

@media and (min-width: 992px){
.sow-slider-image {
min-height: 500px;
}
}

Same errors
Expected LBrace at line 62,col 12
Unexpected token ‘(’ at line 62 col 12
Expected a ‘FUNCTION’ or ‘IDENT’ after colon at line 62 col 22
Unexpected token ‘(’ at line 66 col 1

The platform warns me that

  • there are 4 errors which must be fixed before you can save.
    -update anyway, even though it might break your site

and is unable to save due to 1 invalid setting

Thank you in advance

I see…
Please use this instead:

/*
You can add your own CSS here.

Click the help icon above to learn more.
*/

#mainnav #menu-item-1884 {
	padding-left: 30px !important;
}

#menu-item-1884 a {
	border: 1px solid #ff3314;
	padding: 2px 20px;
	border-radius: 3px;
	transition: all 0.3s;
	background-color: #ff3314 !important;
	font-family: "Raleway", sans-serif
	!important;
	font-size: 13px !important; line-height: 15px;
	font-weight: 700 !important;
	text-transform: none;
}

#menu-item-1884 a:hover {
	background-color: #ff3314 !important;
	color: #fff !important;
}
/*
το padding ηταν 12px,35px
το line height ηταν 24px

ΑΥΤΟ ΕΙΝΑΙ ΤΟ BUTTON HOVER */
#menu-item-1884 a:hover {
	background-color: transparent
!important;
}

.footer-widgets {
	padding: 20px 0;
}
/* το παρακατω ειναι για τα buttons των υπηρεσιων */
[role=button] {
	border-radius: 5px;
	font-weight: bold;
}
/* το παρακατω ειναι για το κενο κατω απο menu και πανω απο footer
*/
.page-wrap {
	padding: 0 !important;
}

.home .entry-header {
	margin-bottom: 0 !important;
}
#pl-7652 .lsow-hero-header {
	margin-top: 0 !important;
}

@media screen and (min-width: 992px){
	.sow-slider-image {
		min-height: 500px;
	}
}

thanks Awan!!! works perfectly!!!