matching course image sizes and alignment

[JDKCON]

Hi I am trying to match my image ratio in all of the below locations

1. Featured courses - brainreno.com

2. all courses - brainreno.c/all-courses

on desktop, mobile & tablet. I want a ratio of 16:10 across all locations however when I am adjusting code to suit one location it is effecting another. How do I: A. centre align image on mobile and tablet for both sections listed above?  An area may be aligned on my phone but then it isnt on someone elses. B. How can i make sure all areas have image with a ratio of 16:10.  I have implemented code from you already but when I make the image large enough to fit a field in one area or device its being cut off in another.  For example on the front page featured courses www.brainreno.com the image is correct but on the mobile it doesn't fit the field.  If I make the image size bigger to work on mobile then part of the image gets cut off on the main page. thanks Anthony  

[Jackson]

Hello, To make all thing align on all courses page use this code: Goto appearance>>customize>>custom css .course-template-default div#course-dir-list ul#course-list li.course_single_item{

height: 350px !important;

} .course-template-default div#course-dir-list ul#course-list li .item{

height: 140px !important;

} .course-template-default div#course-dir-list ul#course-list li img{

height: 350px !important;

} Note: please provide screenshots and page url fro better support Thanks,

[JDKCON]

Hi Jackson, ok here are some pics and URLS of the issues. ISSUE 1 https://snipboard.io/4mPvdz.jpg This is on www.brainreno.com - course image doesnt reach the edge on mobile layout.  If I adjust size in codes given to me previously to make image fit on  mobile then on a desktop the image then gets cut off and isnt at the correct 16:10 ratio. https://snipboard.io/p7gn8U.jpg In this 2nd image I changed size to 200x320 from 190x304 to make fit field on mobile but it hasnt kept 16:10 ratio on desktop its slightly off. ISSUE 2 On the phone that took the above screen shot you will notice its centred however on someone elses phone it is not https://snipboard.io/BMdmqr.jpg Its also not centred when on a tablet. ISSUE 3 On this page www.brainreno.com/all-courses the course image is centred on another mobile.  However on my mobile its not. Aligned mobile https://snipboard.io/M5ijNa.jpg my mobile https://snipboard.io/UEnfuG.jpg thanks Anthony

[Jackson]

Hello, 1- to make code only for mobile you can use this media query by which code only effect on mobile device: @media only screen and (max-width: 500px){ //css code here } 2- To make center align on mobile device use this code: @media only screen and (max-width: 500px){ .home-page .wpb_column.vc_column_container.vc_col-sm-9 .vc_column-inner { position:relative; right:8px !important; } } Refer: https://prnt.sc/sscvkd Note: If you are facing to code implementation for mobile , I have mention media query for mobile that will work only for mobile device Thanks,

[JDKCON]

Hi Jackson,

1. Ok I can now control mobile thanks - however on a large monitor the image doesnt reach the field of vibe grid.  200x320

https://snipboard.io/VM0UOE.jpg If I then make it large enough to work on this screen size 360x225 then when I open on a laptop screen the image ratio is lost and image is cut off. https://snipboard.io/DJdY9r.<wbr />jpg  

1. After entering this code - on the home page www.brainreno.com it is centred on my partners phone but on my phone its not.  How do I make sure its centred on all devices?

 

1. Tablet - how do I make sure it centred on tablet also?

2. Please note that I need the image centred on laptop, tablet, desktop, mobile at below URLS

www.brainreno.com www.brainreno.com/all-courses   Thanks Anthony    

[Jackson]

Hello, Dear user for this page images are centered: https://www.brainreno.com/all-courses/ Refer: https://prnt.sc/stgti0 And for this page : https://www.brainreno.com/ Use the code given below: @media only screen and (max-width: 580px){ .home-page .v_module.vibe_post_grid { position:relative; right:8px !important; } } Refer: https://prnt.sc/stgv1x Note: Now if there is any issue on any device please provide with proper screenshots, Thanks,

[JDKCON]

This reply has been marked as private.

[Jackson]

Hello, This is phone size issue, you can customize this code according to you, @media only screen and (max-width: 758px){ .home-page .v_module.vibe_post_grid { position:relative; right:8px !important; } } Note: Can customize this value: right:8px !important; Thanks,

[JDKCON]

Hi Jackson, problem is if I change the value right:8px !important; For example I altered it to -16px which centres it on my partners phone However on my phone it is now no longer centred. Here is a screenshot of both images on the same setting.

@media only screen and (max-width: 758px){
.home-page .v_module.vibe_post_grid {

position:relative;

right:-16px !important;
}
}

I need to be centred on all mobiles like every other website. Is there a code to centre align rather than to just move the location of the image? thanks Anthony

[Jackson]

Hello, Okay once use max-width:500, Try to change max-width value and check @media only screen and (max-width: 500px){ .home-page .v_module.vibe_post_grid { position:relative; right:-16px !important; } } Thanks,

[Author]

Posts