Canvas Support

Resizing issues

2 replies · opened Oct 22, 2019

CChasGFLOct 22, 2019

Hi,

I have a couple of resizing issues with stuff not lining up on different devices/when resizing.

Firstly a background image, it's very slightly off centre (to the right) and as you decrease screen size it gets more and more off centre so that on mobiles it's half off the screen to the right.

The second issue is a subscriber form at the bottom, I reied using the 'col' css but when you view it on tablet size screens the right hand coloumn shifts shoifts down and overlaps but sorts itself out when you go down to mobile. I've tried adjusting padding etc and can make it better but still at some point it'll overlap. unless you have a better suggestion for doing this, I known due to the form padding it doesn't quite lineup anyway.

You can view these issues here:

http://www.goforleisure.com/magnum/test.html

Many thanks,

Chas

SSemicolon WebSTAFFOct 23, 2019

Hello,

  1. The Codes you are using is incorrect which is why the Background Image is aligned to the right. Make sure that you are using the following code:
background: url('images/site/main_ring.png') center center;
  1. Again, the codes are incorrectly used as the .col Classes are not allowed in the .input-group Container as they have different CSS Properties defined by Bootstrap itself which overrides the .col Classes. Additionally, you must also define the .col Classes only inside a .row Container: https://getbootstrap.com/docs/4.3/layout/grid/#how-it-works . Unfortunately, you will need to use a different design layout here.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

CChasGFLOct 30, 2019

Apologies for the late reply, thanks very much for the swift responses, both issues now sorted, Thanks again for the help.

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