[Resolved] Mobile grid problem

[Teresa]

I’d create a section and entered the following HTML code:

<div class="grid-35 mobile-grid-100 grid-parent">
<div class="grid-20 mobile-grid-20"><img class="alignnone size-full wp-image-119" src="http://localhost/site/wp-content/uploads/2019/09/Image.png" alt="" width="64" height="60" /></div>
<div class="grid-80 mobile-grid-80">
<h3 class="font-weight-light">Title</h3>
Text
</div>
</div>

On desktop the layout is ok, but in mobile mode the “mobile-grid-20” gets 100% of the width.

[Leo]

Hi there,

Any chance you can link us to the site in question?

You can edit the original topic and use the private URL field.

Let me know 🙂

[Teresa]

The site is in development in my localhost. Here is exactly how I am doing:

Section —–
Box type = Full width
Inner box type = contained
Custom classes = grid-parent
Top/bottom padding = 40px
Background color = #ecf2fe
Background image = yes

Inside section —–
Problem = all 20% divs are getting 100% in mobile display

HTML code = `<div class=”grid-35 mobile-grid-100 grid-parent”>

<div class=”grid-20 mobile-grid-20″><img class=”alignnone size-full wp-image-119″ src=”http://localhost/site/wp-content/uploads/2019/09/Image-1.png&#8221; alt=”” width=”64″ height=”60″ /></div>
<div class=”grid-80 mobile-grid-80″>
<h3 class=”font-weight-light”>Title 1</h3>
Text

</div>
<div class=”grid-20 mobile-grid-20″><img class=”alignnone wp-image-121 size-full” src=”http://localhost/site/wp-content/uploads/2019/09/Image-2.png&#8221; alt=”” width=”64″ height=”64″ /></div>
<div class=”grid-80 mobile-grid-80″>
<h3 class=”font-weight-light”>Title 2</h3>
Text

</div>
</div>
<div class=”grid-30 mobile-grid-100 mobile-pull-100″><img class=”alignnone wp-image-97 size-full” src=”http://localhost/site/wp-content/uploads/2019/09/highlight.png&#8221; alt=”” width=”555″ height=”727″ /></div>
<div class=”grid-35 mobile-grid-100 grid-parent text-right”>
<div class=”grid-80 mobile-grid-80″>
<h3 class=”font-weight-light”>Title 3</h3>
Text

</div>
<div class=”grid-20 mobile-grid-20 mobile-pull-80″><img class=”alignnone wp-image-122 size-full” src=”http://localhost/site/wp-content/uploads/2019/09/Image-3.png&#8221; alt=”” width=”51″ height=”66″ /></div>
<div class=”grid-80 mobile-grid-80″>
<h3 class=”font-weight-light”>Title 4</h3>
Text

</div>
<div class=”grid-20 mobile-grid-20 mobile-pull-80″><img class=”alignnone wp-image-120 size-full” src=”http://localhost/site/wp-content/uploads/2019/09/Image-4.png&#8221; alt=”” width=”50″ height=”64″ /></div>
</div>`

[Leo]

It’s really identify the problem without seeing the site live.

Any chance you can duplicate it on a live server or revisit this issue once we have something live to look at?

Appreciate it 🙂

[Teresa]

I’ll do it by Monday. Thanks!

[Leo]

Sounds good.

I’ll also mention that using the grid system is the old method and should be phased out soon.

It might be easier using the Flexbox method similar to the example mentioned in this article:
https://docs.generatepress.com/article/split-header-three-sections/

[Teresa]

Hi Leo! Sorry for the delay, but I had some problems and needed to be out for a while. I finally have the development website up and running. Can you see what is wrong?

Also, in the “about reselling” section, “prefix” and “suffix” are not working.

[Tom]

Hi there,

Our combined CSS option loads a light version of the grid framework, which only contains classes the theme needs.

If you need all of the classes, try going to “Customize > General” and uncheck the “Combine CSS” option.

Let me know 🙂

[Teresa]

Hi Tom! Thank you a lot for your help! that did all the trick! Now all sufix/push/pull stuff are working.

[Tom]

No problem! 🙂

[Author]

Posts