Hero image not fixed size


#1

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!!!


#2

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;
   }
}

#3

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!


#4

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?


#5

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!


#6

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;
}

#7

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


#8

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;
	}
}

#9

thanks Awan!!! works perfectly!!!