Joomla Templates Club 406,261 posts

[okkhalid Friend okkhalidJoin date: November 2012Posts: 229Downloads:2Uploads:133 Thanked: 3 times in 1 posts]

#197132

hello,

I have placed an image to the mashead-1 postion
but the text in mashead-2 overlap the image. also the image is not fit right there:

Another issue I have,

I’m trying to use the price list to use it to have the prices for our services.
1) I would like to center the 2 columns with the header text to the middle of the page:
the MAGIC STYLES PRICE LIST Text
Description and Price columns are not centered in the page, they are on the left.

2) When I display the pricing page in the mobile phone:
http://www.magicstyles.ca/pricing-list

the 2 columns are mobile responsive, so the display shows, the description list and then under that the price list.
Since these 2 columns are must be together all time so the customer can see the description with the price.

in desktop view it shows ok beside each others. but in the mobile it move it in the top each other.

Can I have the 2 columns beside each other all time, not matter what devices used to view the site.

Thanks,

---

Attachments:

1. 
2. 

[fmfame Friend fmfameJoin date: October 2013Posts: 228Downloads:4Uploads:39 Thanks: 8 Thanked: 25 times in 1 posts]

#532670

Hi.

For your first issue you need a bigger picture with more width and less height.
Your picture is too small so it never could shown right.
If you have problems with viewing again, please let me know.

For your second issue you have to put the description in same window like the price. This is a pricing table for 3 different packages. So you cant use 2 price tables for the same packages without having viewing problems.

I would try to integrate the desc and the price in same line in ONE Table and so it should be view perfect.

example:

Mens hair cut —> $20,00
etc..

[okkhalid Friend okkhalidJoin date: November 2012Posts: 229Downloads:2Uploads:133 Thanked: 3 times in 1 posts]

#532772

Hi, I have upload bigger picture, now the area become big and the same problem is still there.

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#532775

<em>@okkhalid 424136 wrote:</em><blockquote>Hi, I have upload bigger picture, now the area become big and the same problem is still there.</blockquote>

Might you be able to throw together a quick screenshot mock-up of how you want your image/caption to display correctly?

[okkhalid Friend okkhalidJoin date: November 2012Posts: 229Downloads:2Uploads:133 Thanked: 3 times in 1 posts]

#532786

Here you go,

Im looking to get this image in this section.

---

Attachments:

1. 

[Hayden A Friend Hayden AJoin date: April 2010Posts: 282Downloads:0Uploads:20 Thanked: 54 times in 53 posts]

#532811

<blockquote>Im looking to get this image in this section.</blockquote>
Please create a new css file named: custom.css in the templatesja_bizcss path and add the following rule:
[PHP].mashead-1 img{
width: 100%;
}

.mashead-1 .eq-first {
margin-left: -120px;
}

.t3-mashead .custom {
padding: 0;
}

.t3-mashead .custom > p {
padding: 0;
margin: 0;
}

.mashead-2 h3 {
padding-top: 50px;
}[/PHP]

[okkhalid Friend okkhalidJoin date: November 2012Posts: 229Downloads:2Uploads:133 Thanked: 3 times in 1 posts]

#532891

Did not work, yet, 🙁

[okkhalid Friend okkhalidJoin date: November 2012Posts: 229Downloads:2Uploads:133 Thanked: 3 times in 1 posts]

#532898

It works, now, but the picture is stretched and become longer

Also there is a red gaps in the bottom and in the right of the image:

Here is mock for what I’m looking for:
an image the is can fill the area and not big so it looks nice with the text beside it.

---

Attachments:

1. 
2. 

[fmfame Friend fmfameJoin date: October 2013Posts: 228Downloads:4Uploads:39 Thanks: 8 Thanked: 25 times in 1 posts]

#532923

hi okhalid

add this to your custom.css
@media screen and (min-width: 768px){
.mashead-1 > div {
padding-right: 0;
}
}
then it should shown correctly.

let me know..

1 user says Thank You to fmfame for this useful post

1. TomC

[okkhalid Friend okkhalidJoin date: November 2012Posts: 229Downloads:2Uploads:133 Thanked: 3 times in 1 posts]

#532925

Worked very well, but still I can see small red gap in the bottom of the image. can we remove that. thanks

---

Attachments:

1. 

[fmfame Friend fmfameJoin date: October 2013Posts: 228Downloads:4Uploads:39 Thanks: 8 Thanked: 25 times in 1 posts]

#532989

Hi i have seen your issue.

but i found another one 😉

try this: 1. you have to upload the same picture with 1px more height ( now its 182px in height but the div container have a min-height of 183px)

And i have seen that on smaller browser width it have also a little issue in picture width.. And thats caused by haydens code.
add this code below your other custom.css lines
Now all should shown good!
@media (max-width: 990px){
.mashead-1 .eq-first {
margin-left: -20px;
margin-right: -20px;
}
}

Let me know..
maybe you could provide us with your backend access if the problem persists

[okkhalid Friend okkhalidJoin date: November 2012Posts: 229Downloads:2Uploads:133 Thanked: 3 times in 1 posts]

#533224

sorry it did not work with the new code and the 183px.
I have pm you the login info, thank you for the help.

[fmfame Friend fmfameJoin date: October 2013Posts: 228Downloads:4Uploads:39 Thanks: 8 Thanked: 25 times in 1 posts]

#533269

Hi okkhalid i added few lines in your custom.css and changed other lines a little bit..

Now it works!

I checked all widths!

on Mobile phones you have a little bit space around the whole masthead module, thats easier and that will also working with other picture sizes.

Have a nice day!

1 user says Thank You to fmfame for this useful post

1. TomC

[okkhalid Friend okkhalidJoin date: November 2012Posts: 229Downloads:2Uploads:133 Thanked: 3 times in 1 posts]

#533350

Thank you so much for the great support.you guys are awesome 😀

[Author]

Posts