Is there a way to change the background row image position by device (desktop vs tablet vs mobile)? It looks like I can change the image per device, but not the position. Is there a way to get around this?
If not, I would love to submit that as a suggestion for future versions of the theme (as long as I am not the only one that that would be helpful for).
Hi Judith! Thank you for the reply. And not quite. I mean the position, as in Center Center, Center Right, Bottom Right, etc.
Since text shows slightly differently on each device, it would be nice to be able to adjust the position of the image.
So for example, if you look at our homepage right now, we have an image that includes a desk with a plant and computer on it. On a desktop it fits nicely with the text, as the text sits off to the left in the open space.
However, on a mobile device, since the image is set to Center Center (I believe), the text is directly over the computer and plant and makes it difficult to read.
So it would be nice to be able to have them set differently. Like to be able to have the image set at Center Center for desktop, and Center Right or Center Left for the mobile so the text can sit in a more design-friendly place of the image.
I know I can create a new duplicate row with these different settings, but I would love an option to make this change within the same row if possible to keep my page a little more simple for speed and simplicity.
I hope that makes more sense. Thank you for reaching out for clarification!
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
.row-bg.viewport-phone.using-image {
background-position: left center !important;
}
Thank you! This will change all background images for mobile though, correct? Is there a way to only change the homepage header image? Each background image on the site is different, and therefore I can't change it universally or it will not work design-wise.
But if this is the only option currently available I will find a different workaround. :)
Hello :)
Is there a way to change the background row image position by device (desktop vs tablet vs mobile)? It looks like I can change the image per device, but not the position. Is there a way to get around this?
If not, I would love to submit that as a suggestion for future versions of the theme (as long as I am not the only one that that would be helpful for).
Thank you!
Melanie
Hi Melanie,
Thanks for contacting us.
By position did you mean the size?
Please provide us more information so that we can respond more accurately.
You can share a screenshot or screencast to help us better understand your query.
I look forward to hearing from you.
Hi Judith! Thank you for the reply. And not quite. I mean the position, as in Center Center, Center Right, Bottom Right, etc.
Since text shows slightly differently on each device, it would be nice to be able to adjust the position of the image.
So for example, if you look at our homepage right now, we have an image that includes a desk with a plant and computer on it. On a desktop it fits nicely with the text, as the text sits off to the left in the open space.
However, on a mobile device, since the image is set to Center Center (I believe), the text is directly over the computer and plant and makes it difficult to read.
So it would be nice to be able to have them set differently. Like to be able to have the image set at Center Center for desktop, and Center Right or Center Left for the mobile so the text can sit in a more design-friendly place of the image.
I know I can create a new duplicate row with these different settings, but I would love an option to make this change within the same row if possible to keep my page a little more simple for speed and simplicity.
I hope that makes more sense. Thank you for reaching out for clarification!
Hey Again,
Thanks for the additional information.
For now you can use this Custom CSS:
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
.row-bg.viewport-phone.using-image { background-position: left center !important; }Thanks
ThemeNectar Support Team
Thank you! This will change all background images for mobile though, correct? Is there a way to only change the homepage header image? Each background image on the site is different, and therefore I can't change it universally or it will not work design-wise.
But if this is the only option currently available I will find a different workaround. :)
Hello again,
Thank you for getting back to us.
Try replacing the previous CSS with this one and let us know if this works for you.
.page-id-5855 .first-section .row-bg.viewport-phone.using-image { background-position: center center !important; }I hope that helps.
Cheers,
That worked perfectly, thank you so much!