Problem with landscape view on tablet..

Hi. http://www.helloessex.co.uk . Tablet, landscape view.. It doesn't looks well (in my opinion).. 2/3 column is too narrow, 1/3 too. I want it to look like on desktop view. But how to do it?

  • Adam Czajczyk

    Hello Remik,

    I hope you're well today and thank you for creating a thread on this.

    During the live chat we found out that it mostly relates to the tables of relatively high horizontal resolution (such as iPads etc). While Divi theme serves by default the "desktop layout" each time when available view width is higher than 980 pixels we need to "fill the gap" between 980 pixels width and 1024 pixels width (which is the smallest default iPad "landscape mode" resolution).

    Apparently, Divi does address "tablet, landscape mode" with this media query:

    @media only screen and ( min-width: 981px ) and ( max-width: 1100px ) {
        /*some CSS here */
    }

    and the CSS withing it is setting the page to look similar to desktop. A way to change it would be as follows (please note: it may be worth switching off caching on site temporarily during these changes):

    1. Create a most basic child theme; here's more information on child theme creation:
    https://premium.wpmudev.org/blog/how-to-create-wordpress-child-theme/

    2. Activate the child theme on your site; at this point nothing should change (though it's possible that some settings would have to be adjusted in theme options but it should look and behave basically the same way as it does currently).

    3. In "style.css" file of a child theme put this code block:

    @media only screen and ( min-width: 981px ) and ( max-width: 1100px ) {
    	/* Video Module */
    	.et_pb_column_3_8 .et_pb_video_play,
    	.et_pb_column_1_3 .et_pb_video_play,
    	.et_pb_column_1_4 .et_pb_video_play {
    		margin-top: -3rem;
    		margin-left: -3rem;
    		font-size: 6rem;
    		line-height: 6rem;
    	}
    
    /* Tabs Module */
    	.et_pb_column_1_3 .et_pb_tabs_controls,
    	.et_pb_column_1_4 .et_pb_tabs_controls {
    		border-bottom: 1px solid #d9d9d9;
    	}
    
    	.et_pb_column_1_3 .et_pb_tabs_controls li,
    	.et_pb_column_1_4 .et_pb_tabs_controls li {
    		float: left;
    		border-right: 1px solid #d9d9d9;
    		border-bottom: none;
    	}
    
    	.et_pb_column_1_3 .et_pb_tabs_controls,
    	.et_pb_column_1_4 .et_pb_tabs_controls,
    	.et_pb_column_3_8 .et_pb_tabs_controls {
    		border-bottom: 1px solid #d9d9d9;
    	}
    
    	.et_pb_column_1_3 .et_pb_tabs_controls li,
    	.et_pb_column_1_4 .et_pb_tabs_controls li,
    	.et_pb_tabs_controls li,
    	.et_pb_tabs_controls li:last-child,
    	.et_pb_column_3_8 .et_pb_tabs_controls li {
    		float: left;
    		border-right: 1px solid #d9d9d9;
    		border-bottom: none;
    	}
    
    /* Testimonials Module */
    	.et_pb_column .et_pb_testimonial_portrait {
    		display: table-cell;
    		float: left;
    		margin-right: 30px;
    	}
    
    	.et_pb_column .et_pb_testimonial_description {
    		display: table-cell;
    	}
    
    /* Column Adjustments */
    	.et_pb_row_4col .et_pb_testimonial_portrait,
    	.et_pb_row_1-4_1-4_1-2 .et_pb_testimonial_portrait,
    	.et_pb_row_1-2_1-4_1-4 .et_pb_testimonial_portrait,
    	.et_pb_row_1-4_1-4 .et_pb_testimonial_portrait {
    		display: block;
    		float: none;
    		margin: 0 auto 20px;
    	}
    
    /* Person Module */
    	.et_pb_column .et_pb_team_member_image {
    		float: left !important;
    		width: 280px !important;
    		margin: 0 30px 0 0 !important;
    		text-align: left !important;
    	}
    
    	.et_pb_column .et_pb_team_member_description {
    		display: table-cell;
    	}
    
    /* Blog Post Formats */
    	/* Quote */
    	.et_quote_content {
    		padding: 50px 43px 45px !important;
    	}
    
    	.et_quote_content blockquote p {
    		font-size: 26px !important;
    		line-height: 44px !important;
    	}
    
    	.et_quote_content blockquote cite {
    		font-size: 18px !important;
    	}
    
    	.et_pb_blog_grid .et_quote_content {
    		padding: 35px 30px !important;
    	}
    
    	.et_pb_blog_grid .et_quote_content blockquote p {
    		font-size: 20px !important;
    		line-height: 26px !important;
    	}
    
    	.et_pb_blog_grid .et_quote_content blockquote cite {
    		font-size: 14px !important;
    	}
    
    /* Link */
    	.et_link_content {
    		padding: 40px 40px 45px;
    	}
    
    	.et_link_content h2 {
    		font-size: 26px !important;
    		line-height: 44px !important;
    	}
    
    	.et_link_content a.et_link_main_url {
    		font-size: 18px !important;
    	}
    
    	.et_pb_blog_grid .et_link_content h2 {
    		font-size: 20px !important;
    		line-height: 26px !important;
    	}
    
    	.et_pb_blog_grid .et_link_content a.et_link_main_url {
    		font-size: 14px !important;
    	}
    
    /* Gallery */
    	.et_pb_post .et_pb_slide {
    		min-height: 384px !important;
    	}
    
    	.et_pb_blog_grid .et_pb_post .et_pb_slide {
    		min-height: 182px !important;
    	}
    
    /* Audio */
    	.et_audio_content h2 {
    		margin-bottom: 24px !important;
    		font-size: 26px !important;
    		line-height: 44px !important;
    	}
    
    	.et_pb_blog_grid .et_audio_content h2 {
    		font-size: 20px !important;
    		line-height: 26px !important;
    	}
    
    	.et_pb_audio_cover_art {
    		float: none !important;
    		position: relative;
    		width: 100% !important;
    		height: 400px !important;
    	}
    
    	.et_pb_audio_module_content {
    		margin-left: 0 !important;
    		padding: 55px 60px 55px !important;
    	}
    
    	.et_pb_audio_module_content h2 {
    		font-size: 36px !important;
    	}
    
    	.et_pb_column_1_4 .et_audio_module_meta {
    		font-size: 14px !important;
    	}
    
    /* Salvattore Styles */
    	.et_pb_column .et_pb_blog_grid[data-columns]::before {
    		content: "2 .column.size-1of2";
    	}
    }

    If I'm not mistaken, that should do the trick. The CSS above is taken directly from your Divi theme and is used for tablet in "portrait" modes and other devices of smaller resolutions. Unfortunately, I do not have a way to test it on my end so you would need to give it a try yourself. That's why I would suggest taking a full backup of the site first just in case anything went wrong. Luckily, if that solution doesn't work, switching back to parent Divi theme should bring back the site in "current shape" and we could work on that further.

    Best regards,
    Adam

  • Predrag Dubajic

    Hi Remik,

    Can you tell us where did you add this code, I checked your Divi custom CSS field, My Custom CSS field and none of them contain this code, there's also no child theme so I'm not sure where to check the Adam's code.

    Oh and inside Divi custom CSS field there's an extra closing bracket after this code:

    .et_boxed_layout #page-container {
        box-shadow: none;
    }

    I would suggest clearing that up as it can cause issues with CSS added below it.

    Best regards,
    Predrag

  • Adam Czajczyk

    Hello Remik!

    I accessed and checked your site and I can see that Divi theme is active there but still on "Appearance -> Themes" page I do not see any child theme. You mentioned that you uploaded it to theme directory so if it is inside the

    /wp-content/themes

    folder it should be visible there. Without it though I don't think we could go much further, unfortunately.

    Having that said, I would like to ask you if it would be possible that you set up a staging site? Since your site is a live and active one I wouldn't want to risk "messing around" with it as it may cause some temporary "break down" or some other issues. If you could setup a staging site (that would be a one to one copy of your current site) I could then ask you for direct access credentials and safely test it, that would make further assistance much easier and safer.

    Best regards,
    Adam

  • Dimitris

    Hey there Remik Woroniecki,

    hope you're doing good and don't mind chiming in here!

    I just visited your website and I can see that the view over the 981px width is like the desktop view, is that right? If you need to have the same result in even lower widths, try to use a lower value in the very first row of the child theme CSS, like 900px.
    Finally, have in mind to deactivate all caches involving from plugins (HummingBird and others), server side and any 3rd party services like Cloudflare before proceeding. Also, clear your browser cache before testing. :wink:

    Warm regards,
    Dimitris

  • Dimitris

    Hey there Remik Woroniecki,

    hope you're doing good today! :slight_smile:

    Could you please point to me which device do you use to test this?
    I can see that Adam mentioned an iPad in his very initial reply.
    Here you can find the resolutions of most iOS devices.
    http://ivomynttinen.com/blog/ios-design-guidelines#resolutions-displays

    If you could also grab a screenshot and attach it here in your next reply, it would be awesome!

    Warm regards,
    Dimitris

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.