Edit mainbody widget text and image

infocubic

Hi,

I would like to exchange mainbody widget text and image. Currently the text is aligned to left and image is aligned to right. I want the image should be aligned to left and text to right. Please help me to do. After change the animation for the image should come left to right.

Please help.

saguaros

infocubic
Hi,

Kindly share the credentials of your site so I can take a look.

Regards

infocubic

saguaros
I have updated the credentials

Joshua-M

I've changed the content of your mainbody text widget, now please add the following custom css code:

.gk-horizontal-slide-right-column {
    border-right: 0;

Cheers
Joshua

infocubic

Joshua-M

I have added the code but it is not at all looking good.

In the mobile and tablet devices the learn more button do not appear, pls help to get this done
The width of the image should be 65% and remaining for text
I need the animation of image from left to right

Joshua-M

Hi,

Try to add also this css code:

.gk-horizontal-slide-right-column {
    width: 31%;
    
}

.gk-horizontal-slide-left-column {
    width: 65%;
}

@media (min-width: 1031px) {
    .gk-horizontal-slide-right-column {
        padding-top: 120px;
    }
}

@media (max-width: 1060px) {
    .gk-horizontal-slide {
        min-height: 900px;
    }
}

@media (max-width: 730px) {
    .gk-horizontal-slide {
        min-height: 1100px;
    }
}

Regarding the animation - I'm not sure if it's possible, please add also FTP access to this thread fields, then I'll be able to check it.

Cheers
Joshua

infocubic

Joshua-M

I have updated the FTP details

Joshua-M

It should be fine now.
I've changed your js/gk.scripts.js file (line 151):

jQuery('.gk-horizontal-slide-left-column').each(function (i, element) {

and added this custom css into your override.css file:

.gk-horizontal-slide-left-column img {
	display: block;
	margin-left: -104%;
	max-width: 100%;
	-webkit-transition: margin-left .6s ease;
	-moz-transition: margin-left .6s ease;
	-ms-transition: margin-left .6s ease;
	-o-transition: margin-left .6s ease;
	transition: margin-left .6s ease;
}
.gk-horizontal-slide-left-column.loaded img {
	margin-left: 0;
}

Cheers
Joshua

infocubic

Joshua-M Hello Joshua,

The Image is not full width in mobile device and the text below a big blank space comes.. I don't know how to fix this.

aman204

infocubic The Image is not full width in mobile device and the text below a big blank space comes.. I don't know how to fix this.

Kindly check now. Have added this media query css to override.css file :

@media screen and (min-device-width: 320px) and (max-device-width: 480px) {.gk-horizontal-slide-left-column{width:100% !important;}#gk-mainbody-columns > section{margin-bottom: 0 !important;} #gk-bottom3{margin-top: 0 !important;}}

Kindly ensure to clear your browser cache if changes dont reflect

infocubic

aman204
I have added some content into the right side text now the text is showing vertically very long and it is not properly expanded the the right side and contact us button not at all showing.

And on 5 and 5.2" mobile devices the landscape display also as issue. Kindly help to fix this issue as this is very urgent. We are today officially announcing the website.

Joshua-M

You've added empty Text widget to sidebar widget area (on all pages), that's why your main content was not expanded to 100% width. Now should be fine.

What's the problem exactly on 5" mobile devices? What screen resolution exactly are you checking?

Cheers
Joshua

infocubic

Joshua-M

The contact now button is not visible in the desktop page.. Pls fix this issue.. If required I can replace the image which has more height.

In the 5" and 5.2" mobile devices landscape display I am expecting image below the text should come not as attached one

Joshua-M

Try to add the following custom css code:

body.imageBg #gk-mainbody {
	padding-bottom: 100px;
}

@media (max-width: 600px) {
	.gk-horizontal-slide-right-column,
	.gk-horizontal-slide-left-column {
		width: 100%!important;
		display: block;
	}
}

Cheers
Joshua

infocubic

Joshua-M

I have added the code.. now the contact button is visible.

But the in the 5" 5.2" and 5.5" mobile devices landscape display still showing same not fixed.. Please check..

Joshua-M

infocubic Hi,
I need to know what device are you using or exact resolution where can I see the issue..

infocubic

Joshua-M

I have tried on Motorola G Plus 5th Gen and Samsung Galaxy A7.

https://www.motorola.in/products/moto-g-plus-gen-5
https://www.samsung.com/in/smartphones/galaxy-a7-2017-sm-a720f/SM-A720FZDDINS/

aman204

infocubic I have tried on Motorola G Plus 5th Gen and Samsung Galaxy A7.

I have tried to check with in-built Responsive Design Simulator in firefox browser however, unable to replicate any such relative issue with certain screen size (5.2inches=499.2px) and having checked in landscape mode too as I dont have the device to replicate in realtime.

You may kindly provide the screenshot taken from device in realtime in order to review closely or try increase max-device-width value as also suggested here to get it right for certain breakpoints of standard devices in responsive mode