I need help with a image that i want positioned next to a button. I tried to use css and put it next to the button but it wont go up to the section.
Reference on the first picture!
how can i allign it for both mobile and pc aswell?
hi,
For easy to help you check, you can provide the store’s url here that help the community will easy to check and help you. Just my opinion, I hope your issue will solved as soon.
website url is 564bb7-2.myshopify.com
website password is daowhe
Hi,
you can add short code bellow to theme.css file:
@media only screen and (max-width: 599px){
#shopify-section-1daa0d06-2649-48fa-8182-41b9c7fcac2e{
position: relative;
top: -65px;
left: 130px;
}
}
i got it working, thank you
do you know how i can allign this for every device? i have a script but its buggy
/* Default styles for screens wider than 590px (fullscreen) /
#shopify-section-1daa0d06-2649-48fa-8182-41b9c7fcac2e {
width: 5%; / Set the image to full width /
height: 100vh; / Set the image to full height of the viewport */
position: relative;
top: -235px;
left: 1035px;
}
/* Media query for screens narrower than 590px /
@media only screen and (max-width: 589px) {
#shopify-section-1daa0d06-2649-48fa-8182-41b9c7fcac2e {
/ Adjust your styles for smaller screens here */
width: 80px;
top: -30px;
left: 30px;
}
/* Add any other styles for screens narrower than 590px here */
}
/* Media query for screens between 590px and 769px /
@media only screen and (min-width: 590px) and (max-width: 769px) {
#shopify-section-1daa0d06-2649-48fa-8182-41b9c7fcac2e {
/ Adjust your styles for screens between 590px and 769px here */
width: 100px;
top: -100px;
left: 128px;
}
}
/* Media query for screens between 769px and 849px /
@media only screen and (min-width: 770px) and (max-width: 849px) {
#shopify-section-1daa0d06-2649-48fa-8182-41b9c7fcac2e {
/ Adjust your styles for screens between 770px and 999px here /
width: 100px;
top: -220px;
left: 61%;
}
}
/ Media query for screens between 850px and 999px /
@media only screen and (min-width: 850px) and (max-width: 1020px) {
#shopify-section-1daa0d06-2649-48fa-8182-41b9c7fcac2e {
/ Adjust your styles for screens between 770px and 999px here /
width: 100px;
top: -240px;
left: 59%;
}
}
/ Media query for screens between 850px and 999px /
@media only screen and (min-width: 1021px) and (max-width: 1400px) {
#shopify-section-1daa0d06-2649-48fa-8182-41b9c7fcac2e {
/ Adjust your styles for screens between 770px and 999px here /
width: 100px;
top: -240px;
left: 57%;
}
}
/ Media query for screens between 850px and 999px /
@media only screen and (min-width: 1401px) and (max-width: 1800px) {
#shopify-section-1daa0d06-2649-48fa-8182-41b9c7fcac2e {
/ Adjust your styles for screens between 770px and 999px here */
width: 100px;
top: -240px;
left: 56%;
}
}
there is defenitly some easier method right?
hi,
if that solved your issue, i think your way handle it’s ok. But all most normal case we will follow typical device breakpoint like that:
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}
so i just place the button underneath for all of those devices? Also do i use % or px. Last question 
yes, but for use % or px, I’m prefer px.
can you show me how to do that? i couldnt make it work. im trying to move this shopify-section-5bcaad32-7f63-4b40-a70e-69a9fbd25883 section
You can follow this way example:
@media only screen and (max-width: 600px) {
#shopify-section-5bcaad32-7f63-4b40-a70e-69a9fbd25883{
position: relative;
top: -65px; // will change depend to device
left: 130px; // will change depend to device
}
}
And after that you can check again on out site to change the param responsive with your expected.
And the same with other case.