Phone screen picture adjustment

Questions related to the Responsive Web Design tools of WYSIWYG Web Builder.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/respon ... esign.html
Please read this first before posting any questions! Also check out the example project to get an idea how the RWD concept works.

Responsive Web Design FAQ:
http://wysiwygwebbuilder.com/forum/view ... 10&t=63817
Post Reply
lifecrane
 
 
Posts: 7
Joined: Sun Nov 04, 2018 12:12 am

Phone screen picture adjustment

Post by lifecrane » Sat Nov 10, 2018 3:41 pm

Hi there!
I am having trouble putting the picture below the orange buttons on top of text for small screen breakpoint .

Rise2alpha.com/tempsite


And Pablo and maybe for more people: I was able to get that small logo looking brilliant the way I wanted on the header by doing this :
Added the small pic as logo image in first break point layout .. and it stayed on top.. I don’t know how really that happened on code side 😇, it just displays correctly the way I wanted, that’s all .. if I added in full with or tablet break point , no joy ..

Jv

User avatar
Pablo
 
Posts: 14529
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Phone screen picture adjustment

Post by Pablo » Sat Nov 10, 2018 3:58 pm

I cannot see what you have done based on the HTML code.
I need a (demo) project to see all the properties.
https://www.wysiwygwebbuilder.com/forum ... 10&t=82134

But it looks like you have used a flex container?
By adding a breakpoint you can set different properties for the flex container.

lifecrane
 
 
Posts: 7
Joined: Sun Nov 04, 2018 12:12 am

Re: Phone screen picture adjustment

Post by lifecrane » Sat Nov 10, 2018 4:27 pm

yes, I think it is that, that is what it says... But it has text box and layout had picture too, and in the bigger layout the picture shows the picture on the side,
When I reduce to break point that I added, the screen splits between the picture, and the text get squeezed up thin.. I wanted to put the picture on top, text on the bottom.. maybe I can use a table in small screen breakpoint, and leave is as it is on the other layouts?

this is the project file https://www.dropbox.com/s/61zxpe1b9i9rv ... k.wbs?dl=0 , I just tried the link and I can download this..

The original template was here http://www.wysiwygwebbuilder.com/suppor ... asic2.html

tx again for this great software,

Joao

User avatar
Pablo
 
Posts: 14529
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Phone screen picture adjustment

Post by Pablo » Sat Nov 10, 2018 6:03 pm

Firstly, I have noticed is that the default view is not the widest view.
Please remove the 1280 breakpoint, it does not make any sense in this configuration.

Also, the image are not included with the project.

To move the image on top of the text, set "Flex direction" to 'column' and 'Align items' to 'stretch'.

Related tutorial:
http://wysiwygwebbuilder.com/flexbox.html

lifecrane
 
 
Posts: 7
Joined: Sun Nov 04, 2018 12:12 am

Re: Phone screen picture adjustment

Post by lifecrane » Sun Nov 11, 2018 1:13 am

Very good yes, Tx! I had some fun there.. tx https://rise2alpha.com/tempsite/
Now I need to fiddle with it a bit more..

In firefox padding shows better, I reduced padding in the flex container that has the pics and the picture went up close to the divider for the smaller screen... but only on firefox I think... latter will figure that out...

I probably need to redo some stuff, will see..looking better :)
Tx again,

Joao

Post Reply

Who is online

Users browsing this forum: No registered users and 5 guests