Mobile development issue.

I am struggling with mobile development.
Does Divi handle responsive design out of the box, or the approach needs to be mobile first?
I checked that for different screen sizes the @media Rule may need to be used.

For instance when i view http://solutionsarray.com/ homepage in visual builder the text in screenshot looks in place but when i view it in mobile phone it jumps down; and the particles are not all over the header like in desktop view. Why?

Are you able to link a a good quality article for mobile web development in divi?
I saw this one and another video but they are generally about size adjustment.
https://www.elegantthemes.com/blog/divi-resources/how-to-create-mobile-first-designs-with-divi

The issue is that the visual builder at least in the case of the header does not correspond with mobile phones.

View attachment 8148

 

Screenshot:

 

Yes the particles part is solved. Thanks!

The issue still remains with mobile development. In the case of the header what i have in the mobile phone does not correspond with my desktop monitor; and vice versa.

What's the best way to deal with this. Custom @Media Rules ?
What do you advise?

 

Yes, the particles part is solved and for the text part i am using media queries to address mobile screens.

The issue now with text is with Portrait vs Landscape.
The landscape "top" property takes over the portrait one. Meaning; to position the landscape text properly, on the portrait it gets positioned too high!

Any idea what's the solution to this?

/* Mobile Portrait */
@Media only screen and (max-width: 480px) {
#one{
position: relative;
top: 310px;
}
}

/* Mobile Landscape */
@Media only screen and (max-width: 734px) {
#one{
position: relative;
top: 230px;
}
}

 

I had but got it working

The trick is to have the size from biggest to smallest. I am now dealing with different sizes and landscape mode; and it's tricky.
If you have something you can chime in that will make the process easier let me know.

But for instance this code is now working:

Code:

Log In or Sign Up to view this code.

 

Hi all,

In the 3rd section of my site http://solutionsarray.com/ i am looking for two different front end visual designs.
- One for desktop and large tablets.
- One for mobile devices.

In this Desktop view i have a row with two modules "left, right".


On mobile i want them two stack on top of each other like in this mobile screenshot i took from this website i am basing myself on for this section.


What's the way to achieve this on my section?

On my section it ends up looking like this.



This is the obstacle i am facing at the moment.

 

Btw, is there a way to contact and admin?

 

Hi all,

Sorry for the repeated row, but the images seem to have broken on the previous row.

In the 3rd section of my site http://solutionsarray.com/ i am looking for two different front end visual designs.
- One for desktop and large tablets.
- One for mobile devices.

In this Desktop view i have a row with two modules "left and right".


On mobile i want them two stack on top of each other like in the mobile screenshot i took from a website i am basing myself on for the design in my section.


What's the way to achieve this on my section?

On my section it ends up looking like the way you seen on the divi mobile view.


This is the obstacle i am facing at the moment.

 

Hi,

I want to thank you for the support so far. I am happy with it! And in urgent matters I'm willing to use the fast support to show my appreciation!

I've touched on this before but still did not get a straight answer on how to get what i need.
I've created a video to make it clear.
https://www.screencast.com/t/DMR47kkf

How do i get both the desktop and mobile screens to display the row in the place i want it to?
If it's placed correctly on mobile, it's not on desktop, (and vice versa)!
Does it come down to Media queries all the way? I want to make sure it's not something that Divi can handle on itself...

Yes I'm moving out of the newbie zone, but still one.

 

OK please disregard this question, as I've figured this out. It was something i have missed for a while.
I now know what i need to know regarding this.