Is it possible to change certain thing so it only changes when you see it on your phone?
i have a couple of things that look perfect in my desktop view (see url) but if i look at it on my phone it does not look good at all. (see attachment)
I added an attachment in the first comment. That's how the url looks now when i open it on my phone.
When i open it on a desktop the header looks exactly like the other pages.
I have added the attachment of how it is suposed to look (www.scopeservices.nl) on your phone. but http://www.scopeservices.nl/scope-hr-services/ looks different on the phone. it has to look the same width and height as the other pages. which are an added header (at the bottom of creating a page) with a set height of 425.
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
@media only screen and (max-width: 1000px) and (min-width: 1px) {
.headerpeter .row-bg.using-image {
background-position-x: 64% !important;
}
}
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
@media only screen and (max-width: 1000px) and (min-width: 1px) {
.headerpeter {
height: 305px !important;
}
}
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
@media only screen and (max-width: 690px) {
.col.span_12.custom.left {
margin-top: -151px !important;
}
}
This is working, but now i have the problem that al the things in the page are crossing eachother. is it possible to have it apply only to the two button rows?
Is it possible to change certain thing so it only changes when you see it on your phone?
i have a couple of things that look perfect in my desktop view (see url) but if i look at it on my phone it does not look good at all. (see attachment)
Hey there,
Thanks for reaching in,
What exactly do you want to change?
Regards
I added an attachment in the first comment. That's how the url looks now when i open it on my phone.
When i open it on a desktop the header looks exactly like the other pages.
I have added the attachment of how it is suposed to look (www.scopeservices.nl) on your phone. but http://www.scopeservices.nl/scope-hr-services/ looks different on the phone. it has to look the same width and height as the other pages. which are an added header (at the bottom of creating a page) with a set height of 425.
i hope this makes any sence. thank you in advance
Hey Again, Hope you had a Great Weekend,
See Screenshot : http://prntscr.com/iq34jy .
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
@media only screen and (max-width: 1000px) and (min-width: 1px) { .headerpeter .row-bg.using-image { background-position-x: 64% !important; } }Thanks
ThemeNectar Support Team
Thank you. It's in the middle now but i want it to be the same size as al the other headers. see the attachment for better explanation.
Hey Again,
Try adjusting the height using a Media Query .
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
@media only screen and (max-width: 1000px) and (min-width: 1px) { .headerpeter { height: 305px !important; } }Thanks
ThemeNectar Support Team
I fixed it changing your css to 170px. Now only the button and tekst are nog on the picture anymore. can you help me please.
@media only screen and (max-width: 1000px) and (min-width: 1px) {
.headerpeter {
height: 170px !important;
}
}
Hey Again,
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
@media only screen and (max-width: 690px) { .col.span_12.custom.left { margin-top: -151px !important; } }Thanks
ThemeNectar Support Team
This is working, but now i have the problem that al the things in the page are crossing eachother. is it possible to have it apply only to the two button rows?
fixed it with this in the page css
@media only screen and (min-width: 1000px) {
.video {
margin-top:25%;
}
}
and . video as custom css in the row