Docs

[dano007]

Hi,

I have some major issues with this site not responding correctly on mobile devices, I have tested in Chrome, the screen does not seem to be updating when the screen is resized. I’ve added some custom CSS, directed by you – so not sure if this is causing the issues?

Its a site under development, so I will send you details on how to access it in a private message.

KInd regards
Dan

[dano007]

This reply has been marked as private.

[dano007]

This reply has been marked as private.

[Paul R]

Hi,

You can add this under Custom > Edit Global CSS in the Customizer.

@media (max-width: 1200px) {
   #engineering-cards .x-column.x-1-4, 
   #engineering-row .x-column.x-1-4 {
    display: inline-block;
    width: 48%;
}
}

Hope that helps.

[dano007]

Hi, sorry but no that hasn’t helped. I’m not sure you follow, when viewed in Chrome developer mode and by cycling through different screen sizes, or manually resizing the browser, the whole page fails to update and respond correct, it looks a complete mess. I have tried removing custom css, clearing cache from both the browser and site – which has had no impact.

Please could I ask you validate you have the same issues as I do by resizing the home page window. Please could I ask you also log into the site using the details provided in an earlier message and see if you can spot the issue?

This is starting to stress me out…

Thanks

[Paul R]

Hi,

I made some adjustments, I change the code to this.

@media (max-width: 1300px) {
   #engineering-cards .x-column.x-1-4, 
   #engineering-row .x-column.x-1-4 {
        display: inline-block;
        width: 48%;
   }

   #engineering-cards .x-container .x-column.x-1-4:nth-child(2),
   #engineering-row .x-container .x-column.x-1-4:nth-child(2) {
         margin-right:0;
   }
}

What it does is making columns go on 2 in a row before jumping to 1 column.

Kindly check on your end.

Thanks

[dano007]

Hi, Sorry no good. Are you looking at the site in a reduced screen size? Look at the screen shots provided, this is impacting the complete home page not just certain parts. Can you confirm you have checked you are getting these same issues please?

Hopfully the attached screen shots show the issues…

Thanks for your help!

[dano007]

I have now added screen shots for you.

[Paul R]

Hi,

Your screenshots exceeds the allowable file size.

Please upload it to your site and provide us the links.

Kindly add notes to it on what you want to happen.

I made another adjustments kinldy check again.

With regards to your headlines, you can apply responsive text – https://community.theme.co/kb/shortcode-walkthrough-responsive-text/

Thanks

[dano007]

I re uploaded the images, have you seen these now?

Same issues exist, can you confirm that you are resizing the browser window, and when you do you see the issues? I’m getting frustrated that I’m not being understood. Maybe send me a screen cast of what you see?

Also, when you say headlines do you mean text like ‘OTHER SERVICES’ ?? could this be causing issues further down the page?

[Paul R]

Sorry,

Yes, I understand your issue and I have check on smaller screens. These are normal behavior and just needs some adjustments due to your content.

Please replace the code with this.

@media (max-width: 1300px) {
   #engineering-cards .x-column.x-1-4, 
   #engineering-row .x-column.x-1-4 {
        display: inline-block;
        width: 48%;
        vertical-align:top;
   }

   #engineering-cards .x-container .x-column.x-1-4:nth-child(2),
   #engineering-row .x-container .x-column.x-1-4:nth-child(2) {
         margin-right:0;
   }
   
   #engineering-cards .x-gap,
   #engineering-row .x-gap {
       display:none;   
   }    
   
   #engineering-cards h4,
   #engineering-row h4 {
       margin-top:0;   
   }    
}

@media (max-width: 979px) {
  #engineering-cards .x-column.x-1-4,
  #engineering-row .x-column.x-1-4 {
      display:block;
      width:100%;
  }
}

You have been pointing out the issue but we also need to know what you would like to happen.

By headline, I mean STRUCTURAL ENGINEERING. CIVIL ENGINEERING. and others.

Thanks

[dano007]

Ok, I see.

Well, thank you – it looks like those last changes have helped address most of the mobile issues. THere are still some formatting, text wrapping issues with the headlines (I used the standard text tool for this not the headline element) but from what you say these issues will be resolved by using the responsive text you mentioned above?

A remaining issue is as per the attached.

The sections that have Structural engineering text and images still seem to have odd formating, its not a consistent look and feel, that maybe partly due to some of the spacers I’ve put in to try and balance the text on full screen display.

Would it be possible for make the page like it does for full width, picture to the left and text for smaller pc and lap top screens, somewhere between 1280 – 1440 width? At the moment the way everything stacks is very in consistent between mid screen sizes.

Does that make sense?

[dano007]

What I’m trying to say is that on mid size screens/lap top etc I’d like the same payout as seen when viewed full size as in the pic in the attached.

At the moment when I view the homepage at a laptop screen size everything still looks a mess.

THank you!

[dano007]

Did the above make sense please?

[Friech]

Hi There,

That can only be done if we make the text size small on those laptop screen width.

In this case you can utilise the Responsive Text settings (Cornerstone > Settings > Responsive Text). To do this apply a class to those text.

e.g.
<h4 class="responsive-text"><strong><span style="color: #12386b;">CIVIL&nbsp;ENGINEERING.&nbsp;</span></strong><span style="color: #808080;">Considering a new project? Our structural and civil engineering consultants have the experience to design your project.</span></h4>

And then create a new responsive text setting and use this class as the selector. Play with the compression, min-size and max-size until you get the desired look.

http://prntscr.com/cken5a

Hope it helps, Cheers!

[Author]

Posts