[Resolved] Mobile grid problem

Home Forums Support Mobile grid problem

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1012946
    Tris

    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.

    #1013028
    Leo
    Staff
    Customer Support

    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 🙂

    #1013436
    Tris

    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>`

    #1013729
    Leo
    Staff
    Customer Support

    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 🙂

    #1013873
    Tris

    I’ll do it by Monday. Thanks!

    #1014031
    Leo
    Staff
    Customer Support

    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/

    #1030380
    Tris

    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.

    #1030826
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #1053802
    Tris

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

    #1054076
    Tom
    Lead Developer
    Lead Developer
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.