Responsive issues on tablet

Hi again

I am designing this: http://tobiasnielsendesigns.com/doxafilm/om-os/ “About Us” page. In laptop and above it is working as it should, but there are problems, when I resize it to tablet size and smaller.
In theese sizes the text from 2 different persons are shown above each other, which makes no sense, do you know how to fix that?
I hope you can help.

Best regards Tobias

Hello Tobias,

Move all of your image to the left column. In the row where image should be placed in right column in larger screen, add a unique class name e.g push-image-right to Row Styles > Attributes. Save and update page. Then add the below CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (min-width: 781px) {

      .push-image-right {
        display: block !important;
      }

      .push-image-right:before,
      .push-image-right:after {
        content: '';
        display: block;
        clear: both;
      }

      .push-image-right .panel-grid-cell:nth-of-type(1) {
        float: right;
      }

      .push-image-right .panel-grid-cell:nth-of-type(2) {
        float: left;
      }  
      
    } 

Regards,
Kharis

Hi Kharis

That works, thanks. I didn´t thought it was that easy, so I have done the same on other parts of the site :slight_smile:

Regards Tobias

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

Hi Kharis, I can see that, there are still some responsive issues, If I go below 865px. :slight_smile:
I want the 2 widgets with text and picture to be equal size beside each other in small screens as well as large screens. Do you know what to do to fix that?
It happens, when the sentences is divided to two lines, maybe it is better with a image, but I prefer text

Hello there,

Please try adding the below extra CSS code:

    @media only screen and (min-width: 781px) and (max-width: 865px) {
      #panel-276-2-0-0 .textwidget .om-os-overskrift,
      #pgc-w5ace15d77a9e4-0-1 .textwidget .om-os-overskrift,
      #panel-w5ace15d77aa34-0-1-0 .textwidget .om-os-overskrift{
        font-size: 16px;
      } 
      #panel-276-2-0-0 .textwidget p,
      #pgc-w5ace15d77a9e4-0-1 .textwidget p,#panel-w5ace15d77aa34-0-1-0 .textwidget p{
        font-size: 13px !important;
      }
        
    } 

Not really sure if it’s an ideal solution for you as the font size changed. But there’s no other better solution than this.

Regards,
Kharis

Hi Kharis again

I am not sure, if that is the best solution either.

Another problem is on this page:
http://tobiasnielsendesigns.com/doxafilm/produktionsforloeb/

I want that page to look something like this:

But I have trouble making the rows next to each other like on the other page. I am wondering, if there are a plugin, that makes it easier to design this grid style or what else to do?

Regards Tobias

Hello there,

It looks like you could accomplish it using page builder. You’d need to add multiple rows. The first row would only contain a blank text widget, then set a row background.

For “Pre Produktion”, I’d recommend you use an image widget. You’d use an image widget as well for hand holding a pencil, or you can use an empty text widget and use widget background instead.

I know it sounds complicated unless you really master page builder. You may want to learn more about designing a page with page builder. Checkout these resources:

https://siteorigin.com/page-builder/documentation/

https://docs.athemes.com/article/109-row-styling

https://docs.athemes.com/article/108-adding-rows-widgets-pages

Regards,
Kharis

Hi Kharis

Hi, the site is still making me problems. I am not on this project full time, therefore that goes some days between my answers. :wink:

On the frontpage: http://tobiasnielsendesigns.com/doxafilm/ I want the pictures to touch each other diagonally as like the picture above.
Therefore I want to make the images fill the colored (yellow, red and blue) spaces. The color is just a help to fix the responsive problem, when I resize.
Do you know how to get the images fill the top as well and keep that size, when resizing? :slight_smile:

Regards Tobias

Do you have any ideas to fix this, so the pictures touch each other diagonally, when resizing :slight_smile:
Below 1050px it starts to look weird.

Regards Tobias