5 replies · opened Aug 24, 2021
I am having difficulty placing a image that acts as a button on-top of a photo. my difficulty is that the buttonIt changes its position depending on the browser window size.What is the best method to maintain the position and size of the button to be consistent and responsive in all browser windows.
Thank you for your continued support.
Hello,
Any chances you could provide us with a Live URL or an Example of what you are looking for so that we can properly understand and provide further assistance to you. Thanks for your Patience.
Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.
Below is a live link to my page where the buttons are changing position as I described .
http://jazzyinteractive.com/projects/IES3/index.html
Thanks for your continued advice.
Hello,
The Buttons you are using are Images which is why this is not working as expected. They are getting resized as the Browser Resizes as the Normal Images do. You will need to add a fixed width and height for the Image Buttons so that they are not resized on any device and keep their shape and size. Or use HTML Buttons and achieve the styling using Custom CSS (we recommend this).
Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Follow up....I changed the buttons to be fixed in size 240X62, the **learn more ** buttons are the same size and the images they are placed over are the same size, and the code for each of the respective containers is exactly the same.. so I can't understand why the first LEARN MORE button appears lower in the window in relation to the image that it is atop of than the Second LEARN MORE button appears a top the respective image>. Can you explain why they are not positioned in the window exactly the same when looking in responsive design mode on smaller devices... can this be adjusted using a media query?.
if yes, how ?
Hello,
Thanks for your Patience!
We have checked this out and there way too many Customizations with this and as we have mentioned earlier, Images are responsive according the Screen Width and will resize and change their positions according to the Device. Where as Buttons will not change size, but their positions will depend on the defined bottom position. We recommend defining a fixed bottom position in px. This will then make the position of the Image Button constant in all the devices.
You can also define different bottom value in different Media Queries.
Example:
[ch_pre type="css"].device-xs .image-button {
bottom: 50px;
}[/ch_pre]
The Responsive Classes are as follows:
.device-xl – Class for Large Devices >=1200px
.device-lg – Class for Medium Devices >=992px to 1199px
.device-md – Class for Tablets
.device-sm – Class for Landscape Mobiles or Phablets.
.device-xs – Class for Portrait Mobiles
You can add these Custom CSS codes in the css/custom.css File.
This will definitely work fine. Hope this Helps!
Additionally, since this feature is not related to Canvas in any way but generic CSS/HTML Codes, you will need to manually code this or Hire a Freelancer to help you out. We currently do not provide Customization related Support according to the Item Support Policy: https://themeforest.net/page/item_support_policy .
Let us know if we can help you with anything else or if you find any further issues.
Have the same question, or something new?
Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.
Reply on the dashboard