Viewing responsive web site is killing me

responsive web site is killing me



User: Susan S. 5 years ago
I've watched the videos and then tried to follow them exactly by stopping and starting them but nothing is working the way it does in the video tutorials. Is there some other learning source I can use? I have good working knowledge of Everweb "regular" websites but I'd like to design with responsive from now on.

And I'm just at the very beginning of this process.

Here are my current questions:

I added in an image that I want to stretch across the top of the site and it does initially. And when I try to add a text box (per video tutorial) by adding the text box and then right clicking and adding to the responsive block. But it shrinks the image fill to the size of the text box.

When I try and make the image larger again it makes the entire text box larger so I'm unable to move the text where I want it to go because the text box is the exact same size of the image. If I select the text box and use the inspector to change the size of the text box the image I want to fill is only as high as the text box, the 2 are totally tied together in regards to height.

And I can't move the text where I want it to be, it's either on the left if its full size or stuck in the middle if I change the text box width. I want it in the sky on the left. And again if I make the text box smaller either by drag and drop or by using inspector the image is the exact size of the text box.

I'd really love some in-depth instructions if there are any. I'm reasonably sure after playing with this for 2 hours and I can not make it work, that I'm going to have a LOT of questions and it seems like it will be very time consuming for all involved to answer them all.

You can see the process by the images I've attached here.
User: Susan S. 5 years ago
it took me 3 tries to post the above and I see my images are not there. Sigh, this is not going well today.

You can see the images here:

http://www.virtualassistantcapecod.com/test.html

Lastly after struggling with this for another hour I'd be willing to pay someone to help me - if the help was timely. It seems that to have text on top of a full-width image I have to set it to be on the right, middle or left. I can NOT drag and drop it. So am I right that you can't put text (the name of the business) on top of a full width image and have that text be responsive?

And when I preview it with the text and make it the size of an iPhone the full-width image gets smaller as it should but the text does not, nor does it wrap. It's out of the picture completely.

I'd love to learn responsive but I seem unable to. I guess I can always make the website the old fashion way but it's not ideal and I really want to learn how to do this.

I'm so confused.

Last edit 5 years ago
User: Paul-RAGESW 5 years ago
Hi Susan,

Sorry for the problems you are experiencing.

This is how the Responsive Row widget works. It adjusts to the size of the objects within it. Once you place an object in it, it will adjust itself to that content.

This is because as a responsive website, the website needs to adjust to the browser width.

So imagine you had two textboxes in the Responsive Row. When the browser width is wide enough the objects will align horizontally.

Once you make the window smaller and the width is too small to show both textboxes side by side, it will then adjust them vertically so they are stacked one over the other.

This means that the background image you have set in the Responsive Row will have to adjust to that new height.

This is why the Responsive Row works like this. It adjusts to the height of the objects because a responsive website is dynamic and always changes itself based on the width of the browser.

I'm not sure if that is still confusing but this is the nature of a responsive site. They are a bit more complicated to make than a fixed page site because of their dynamic nature. The page content adjusts to the browser width and thus needs to re-arrange itself. There are more restrictions and considerations than a fixed width page.

It sounds like you want to just embed a single text object in a Responsive Row with the background image. Keep in mind, that even if you do this, the height of the responsive row will change based on the height of the text. So you can't rely on a fixed height for any responsive row on your page.

In EverWeb 2.9 you may want to look at some third party widgets that let you have the "Hero Image" effect with a text overly.

http://everwebwidgets.com/ewWidgets/image/hero.html
http://everwebwidgets.com/ewWidgets/image/hero-2.html

In EverWeb 3.0, we are working on some new features that will allow you to achieve many of these "Hero Image" effects with the FlexBox widget.

I hope this helps! Let me know if you need any further clarifications.

-------------------------------
Paul
EverWeb Developer
User: Roddy 5 years ago
These widgets mentioned above are actually for those who are creating fixed width designs.

The responsive widgets section has a large selection of hero images and hero switch images. You can search for widgets using keywords using the search function in the toolbar at the bottomof the hero image on the home page.

Hero switch is my name for an image the is fixed height on computers and switches to responsiv height on mobile. This gives a much better viewing experience in most cases.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.


Post Reply
You must login or signup to post.