the height of the top row is two columns set to be a height of 750px but the responsive design isn't doing what i want it to... the two columns (Google map on left, Nectar Slider on right) shift differently in height depending on the browser window size. how can I keep the two columns equal in height?
Just to make sure we're on the same page, is it that you want the map to be the same size as the image in mobile?
If that is the case, please go to Salient > General Settings > CSS/ Script Related and enter the following code in the "Custom CSS Code" section:
@media only screen and (max-width: 1000px) and (min-width: 690px){
.nectar-google-map{
max-height: 648px!important;
}
}
@media only screen and (max-width:690px) and (min-width:1px){
.nectar-google-map{
max-height: 450px!important;
}
}
You can adjust the values to suit your needs. Otherwise, please explain a little further so I can get a clear understanding of what you're trying to achieve.
Could you try and make sure the equal height option on the row settings is enabled and if so then switch the type option on the same row settings to full width content and see if this improves the layout of the columns.
If this does not give you what you want, give us temporary admin access - username password with admin privileges - and we will take a closer look at this from the backend.
the height of the top row is two columns set to be a height of 750px but the responsive design isn't doing what i want it to... the two columns (Google map on left, Nectar Slider on right) shift differently in height depending on the browser window size. how can I keep the two columns equal in height?
Hey there,
Thanks for reaching in,
Can you please send us a link to your website or a screenshot so we can be of more help?
Regards
Sure - I had pasted that into the original ticket, not sure what happened. Here it is again:
http://naturetype.com/index.php/about
Hi Joel,
Thanks for giving us access to your site.
Just to make sure we're on the same page, is it that you want the map to be the same size as the image in mobile?
If that is the case, please go to Salient > General Settings > CSS/ Script Related and enter the following code in the "Custom CSS Code" section:
@media only screen and (max-width: 1000px) and (min-width: 690px){ .nectar-google-map{ max-height: 648px!important; } } @media only screen and (max-width:690px) and (min-width:1px){ .nectar-google-map{ max-height: 450px!important; } }You can adjust the values to suit your needs. Otherwise, please explain a little further so I can get a clear understanding of what you're trying to achieve.
Looking forward to hearing from you.
Best Regards.
Hi Joel,
Apologies for the late reply.
Could you try and make sure the equal height option on the row settings is enabled and if so then switch the type option on the same row settings to full width content and see if this improves the layout of the columns.
If this does not give you what you want, give us temporary admin access - username password with admin privileges - and we will take a closer look at this from the backend.
Thanks.