Joomla Templates Club 406,261 posts

[dr_tatian Friend dr_tatianJoin date: July 2015Posts: 48Downloads:8Uploads:8 Thanks: 4]

#1006831

splitting this from the prev topic

The image in features intro often switches sides. It is currently placed on the left of the text- but when i adjust browser length or view on a smaller device the image switches to the right. How do I get it to stay on the left next to the text?

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1006887

Hi
Kindly Share the site login details using private reply.
I am not able to check the site because it is in offline mode.

[dr_tatian Friend dr_tatianJoin date: July 2015Posts: 48Downloads:8Uploads:8 Thanks: 4]

#1007427

This reply has been marked as private.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1007471

Hi
I saw you turned off the Responsive mode that creates the problem. Kindly Turn on the responsive mode, compile less to css and check.
Take a backup of a site before apply changes.
And if still, you have problems post the screenshot of issue.

[dr_tatian Friend dr_tatianJoin date: July 2015Posts: 48Downloads:8Uploads:8 Thanks: 4]

#1007686

Hi Pankaj, thats not correct. I turned off responsive mode because of this issue. Secondly I can’t imagine how resizing the browser in non-responsive mode would cause the image to switch if its in a fixed position?

I have turned responsive mode off and as you can see the problem persists

[dr_tatian Friend dr_tatianJoin date: July 2015Posts: 48Downloads:8Uploads:8 Thanks: 4]

#1007692

i can also confirm the same behaviour occurs on the demo site. It seems to be when switching between responsive screen sizes

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1007728

Hi
I am not able to replicate the problem on demo site.
Can u post me screenshot of issue, without screenshot its very hard to assume the exact issue.
And the Device in which you are getting this problem in demo site.

[dr_tatian Friend dr_tatianJoin date: July 2015Posts: 48Downloads:8Uploads:8 Thanks: 4]

#1008042

sreen shots from demo site attached. When trouble shooting the cod I think it has something to do with the following line

<div class="col-xs-4 col-md-6 screen-xs-absolute hidden-sm hidden-xs"> 

because when i switch the col lenghts I can get the image to stay on the right until I re-size the browser to about half the length. (code below). Can you describe what the above code line does, I would like to hide the image if the screen size becomes too small.

<div class="row screen-xs-relative">
<!<div class="col-xs-4 col-md-6 screen-xs-absolute hidden-sm hidden-xs"> 
<div class="col-xs-12 col-md-6">
<div><img src="images/whychooseus.jpg" alt="" /></div>
</div>
<div class="col-xs-12 col-md-6">
<h3>WHY CHOOSE IMPRESSIVE SMILES...</h3>

[dr_tatian Friend dr_tatianJoin date: July 2015Posts: 48Downloads:8Uploads:8 Thanks: 4]

#1008044

attachment

---

Attachments:

1. image-flip-issue.pdf

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1008162

Hi

The value of col is depends on different screen sizes.

1. col-xs extra small
2. col-sm small
3. col-md medium screen
4. col-lg large screen.

I checked your site the image is not going to the right side
http://prntscr.com/e4mxfp

Regards

[dr_tatian Friend dr_tatianJoin date: July 2015Posts: 48Downloads:8Uploads:8 Thanks: 4]

#1008628

thanks you, i assume if I want to have the image hidden on small screens the correct syntax would be?

<div class="col-lg-12 col-md-6 col-sm-hidden col-xs-hidden>"

is this correct?

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1008670

Hi
Here is correct code

<div class="col-lg-12 col-md-6 hidden-sm hidden-xs">

hidden-xs and hidden-sm is to hide this div in small views.

1 user says Thank You to Pankaj Sharma for this useful post

1. dr_tatian

[Author]

Posts