Viewing Responsive Image Slider

Responsive Image Slider



User: Carole F. 5 years ago
In building a responsive website in 2.9, I have a problem with an image slider placed in a responsive row. It works well on a desktop but on a cell phone, the images within the slider are cut off and shifted to the left (not centred).

Is there a way of sizing the image slider so it will work correctly on a cell phone and a desktop, or would an Everweb responsive image slider that needs to be purchased fix the problem?

The site is:
www.carolefreeman.art

The slider I am speaking of is on the first page here:
https://carolefreeman.art/

But, I have many image sliders placed in responsive rows on the Exhibitions page, which have the same problem:
https://carolefreeman.art/exhibitions.html

Thank you
User: Paul-RAGESW 5 years ago
Hi Carole,

Sorry for the problems you are experiencing.

You shouldn't use a Responsive Row in this case.

A Responsive Row is only needed if you want multiple objects to appear horizontally on your page and adjust vertically when the browser width is made smaller.

If you are only placing an object, such as your Image Slider, in that section you should not use the Responsive Row.

So to remove the Image Sliders from the Responsive Rows do the following;

1. Right click on the Image Slider and select 'Pick Later'->Image Slider XX
2. Go to Edit and Select 'Cut'
3. Delete the Responsive Row from the page
4. Go to Edit->Paste to paste the Image Slider once again on your page (you may need to re-adjust the position of the image slider)
5. Set the Image Slider to Full Width in the Inspector -> Metrics tab (and set the left/right margins to whatever you want)
6. If you are using the recently released EverWeb 2.9 you can also set a Maximum width in the same section in the Inspector

Once you do this for all of your Image Galleries everything will work properly.

Hope this helps, please let me know if you need any more clarification.

-------------------------------
Paul
EverWeb Developer
User: Carole F. 5 years ago
Thank you. I will try that.
Will the image slider be responsive when it is not in a responsive row?

What is the maximum width measurement I should insert to make the image slider size well on a cell phone?
User: Paul-RAGESW 5 years ago
Hi Susan,

Yes, everything set to full width on a Responsive Layout is Responsive.

The Responsive Row is ONLY used to layout multiple objects horizontally that will adjust vertically when the browser width is small (such as on a small mobile device).

Otherwise, any object can be placed on a Responsive Layout and set to full width. If the object can't be made Responsive you will get a warning.

Quote:
What is the maximum width measurement I should insert to make the image slider size well on a cell phone?


The maximum width would not apply to the mobile device. The maximum width is the maximum size an object can be so it would be relevant on wider screens like Desktop computers.

For example, a mobile screen might be 700 pixels wide. A desktop screen might be 1500 pixels wide.

If you place an image on your page that is 1200 pixels in width, it will look fine on the smaller 700 pixel mobile device. However, it will look stretched on the 1500 pixel desktop screen. For that reason, you can set the maximum width to 1200 pixels in the Inspector.

This means that when the user visits your website on their mobile device everything is fine at 700 pixels.

When they visit your website on the desktop computer, which might be 1500 pixels, you have limited the image width to a maximum of 1200 pixels so the image doesn't stretch to the entire screen size and looks ok there as well.

Does this make sense?

Please let me know if you need anything clarified.

-------------------------------
Paul
EverWeb Developer
User: Carole F. 5 years ago
Thank you. I have tried taking the image slider out of the responsive row on my landing page and that works!

On the exhibitions page, I experimented and that will not work. I have built the page with several responsive rows. The first responsive row has a text box with text and hyperlinks. The next responsive row contains the image slider. the next is a text box with text and hyperlinks etc.

https://carolefreeman.art/exhibitions.html

When I deleted the first responsive row with an image slider and then pasted the image slider back in, the image slider covers the following responsive row. I have tried moving the rows around to no avail. They no longer stack properly.

Can you think of another solution for this type of layout?
Thank you

Last edit 5 years ago
User: Paul-RAGESW 5 years ago
Quote:
When I deleted the first responsive row with an image slider and then pasted the image slider back in, the image slider covers the following responsive row. I have tried moving the rows around to no avail. They no longer stack properly.


This is because the Image Slider isn't set to full Width. Once you set the Image Slider to full width from the Inspector->Metrics tab it will flow vertically with the other objects on your page.

-------------------------------
Paul
EverWeb Developer
User: Carole F. 5 years ago
Thank you Paul. I have been working on the site and everything is working much better.

Wondering if it is possible to get the hamburger in the navigation menu centred rather than left or right?
Also, the drop down menu from the hamburger is very close to the edge. Any way of bringing it in a bit?

Last edit 5 years ago


Post Reply
You must login or signup to post.