Height Difference Between Modules & Truncation Of Graphics/ CSS changes

jamarrett

I need to know how I can reduce the height difference between the home page modules .There is too much white space between the modules on the home page .

I also find the graphics in the modules gets truncated when displayed on a PC monitor.They dont get truncated when viewed on a mobile.

The links to the screenshots are here :
https://drive.google.com/open?id=1fIrk-v25G1b8eFAWmARuwEe6zqW9neDS

Thanking you in advance

saguaros

jamarrett
Hi,

I see no screenshot in above link, could you share again?

jamarrett

Hi
Can you check again now ? The screenshots are available in the link now

I also have another question related to Insight template .

Question : Activating "Offline " in Global Seetings is not placing the Insight website/template in offline mode.
I am using Regular labs " cache Cleaner " but even after deleting the cache(s) , the site is not going into offline mode.

I am wondering whether there is anything wrong with the template's offline.php file.

Thank you

Ninja

jamarrett
Hi
Kindly open template folder /css/custom.css file and add this code to change padding

.t3-section.padding-bottom {
    padding-bottom: 160px;
}
.t3-section.padding-top {
    padding-top: 160px;
}

Reduce the padding value as low as you want.

For the images. use this code in custom.css file

.acm-features.style-3 .features-image img {
    position: absolute;
    top: initial;
    left: initial;
    transform: initial;
    -webkit-transform: initial;
    min-width: 100%;
    min-height: 100%;
    width: 100%;
    max-width: none;
}

Clear Joomla cache to see changes.

Your site is in offline mode, it maybe due to any other cache applied on your site.

Regards

jamarrett

I dont have a custom.css file so I have to create one , insert the code you gave me and place it in
asiapacis.com/templates/ja_insight/css folder ?

I did that and the padding for the top has been solved.

I also requested in the previous post for the the padding above the heading " 15+ years of experience ......" and the module above to be reduced. Please help me with the code.

Finally, the code you gave me for ensuring that the images appear in desktop mode is not working.it still truncates the images.

Please revert.Thank you

Ninja

jamarrett
Hi
I checked you already added custom.css file and the code is also working.
If you want to reduce more padding, you need to reduce the padding value from 100px to lower for top and 160px to a lower value for bottom padding.

Clear your browser and Joomla cache to see the changes on frontend.

Regards

jamarrett

The images are still truncated. The padding problem is sorted out.
If the truncation problem cannot be solved , then inform me so that I can look at alternatives.

I thought it could be a problem with the cache ( cleaned the cache a few times).Waited for a day too to see if the images are still truncated. I have even checked the site with other browsers ( Edge etc )

I am very upset.

Ninja

jamarrett
Hi
I checked the site again and noticed the code is modified in custom.css for image.
I changed it again and also disabled JCH plugin so it loads the file correctly.
Here is proof screenshot how it look like : http://prntscr.com/lu9nq6

jamarrett

Ok the problem seems to be solved.
But JCH has definitely improved performance.

This is the settings page of JCH which may have caused the problem ( " image wrap " ) etc

https://drive.google.com/file/d/1lHOCLL4PVzAWaI82j0-5qD6l6a33T2aM/view?usp=sharing

Isn't it wiser to disable an option in JCH which is causing the problem than disabling JCH totally ?
I dont seem to have problems on other sites where I use non Joomlart templates.

Thanks in advance

Ninja

jamarrett
Hi
You can turn it ON after clear JCH cache and completing customization in CSS.

Regards

jamarrett

Now I have the problem that the images are messed up in mobile but are ok in desktop mode.
I have switched off JCH , GKzip etc .
Not sure how long more I can endure this anymore .Just a waste of valuable time.

https://drive.google.com/drive/u/1/folders/1sz7_zVW8YEy-JEHIwLG5IOI2sWYgKZg3

aman204

jamarrett Kindly re-check as the above link to screenshot is inaccessible

jamarrett

https://drive.google.com/file/d/12Oj73Ptl64N2Xj3WYoBvtn0-HVy9r7AR/view?usp=sharing

aman204

jamarrett Kindly check now. Have added this to custom.css file :

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {.acm-features.style-3 .features-content{padding-bottom:0 !important;padding-top:0 !important;}}

jamarrett

No it's still the same Will delete totally the installation and perform a new install and then see whether the problem persists.

aman204

jamarrett Hi

Will look forward to hear back from you as you have the specific module shown on the site in order to review further

jamarrett

I have decided to disable the 2 modules that have been giving me the problem. Instead, I have activated the Heo module .So far , there is no problem.

So , will revert if there are any other issues.

jamarrett

As mentioned before, I have disabled the "troubling" modules and so far the Hero module is not giving any trouble ( crossing my fingers )

I am finalizing this template for this project and need some css changes:

Change the blue and gold in the original template ( Screen 1 )

I used Theme Magic to start a new theme called " Corby " and changed the blue in the template to # 1B2855.

However, it does not appear as # 1B2855 in the site.It appears as #232254

Could the css be changed to enabled it to be # 1B2855 for the blue and # C1A97D for the gold .

I can change the hex in the css later if need be .

https://drive.google.com/file/d/1-eXd_M92XCabzhPVWQe04wsOT15oybqG/view?usp=sharing
Main menu change to # 1B2855 in css ( Screen 2 )

https://drive.google.com/file/d/1hERuXqQVFw49h0PJ25nBfVfPW5YhaGvU/view?usp=sharing

Main heading bolden by 15 % ( screen 3 )

https://drive.google.com/file/d/1bJzCS-7CWRVwPfxt32GbFjZsbn9_u4u6/view?usp=sharing

4.Padding between lines of text to be reduced by 15% in Css ( Screen 4 )
and I can further adjust in css if need be.I had changed the fonts in Corby theme to Open Sans.

https://drive.google.com/file/d/1QUWZNWUBnS0PLuAiAGuLAwa3Farip0xA/view?usp=sharing

 
  5.Subheadings changed to gold ( # C1A97D )  and bolden by 25 % .( Screen 5 )
https://drive.google.com/file/d/1FvkPcDdLqyBhnkf6v3RW7sAjV42EPsyl/view?usp=sharing

Thanks in advance

jamarrett

Screen 5 link should be :
https://drive.google.com/file/d/1FvkPcDdLqyBhnkf6v3RW7sAjV42EPsyl/view?usp=sharing

saguaros

jamarrett

Hi,

If you're working on customizing as new theme, it's better to work with LESS file in template: http://www.t3-framework.org/documentation/bs3-customization#theme-customization

For now, you can take a backup of your site first, then go to Backend > Extensions > Templates > JA Insight > General tab > and enable the option Development Mode (then your site will load LESS files)

Let me know when you backup, then I will suggest you further changes.

Regards