I think I have got somewhere but not fully.
I have added this code which seems to have improved the buttons being seperated.
@media (max-width:320px) {
.empty-category-block p {
display: inline-block;
margin:20px 0px 0px 0px;
}
}
@media (min-device-width:568px) and (max-device-width:767px) {
.empty-category-block p {
display: inline-block;
margin:20px 0px 0px 45px;
}
}
The main problem seems to be the search image staying above the h2 and p text, there are still some media queries where this breaks and the search (magnifying glass) goes into the text?
on the iPhone in portrait on 320px the buttons I would like to align to the left under the h2 text so they are more central, at the moment they are to the right on the screen.