Dear Experts,
I am using Martxa template. It has a pretty listing in a tree-like design. I want to modify it a little bit. In current design, the picture and text are side-by-side, I want to put just one line text under the picture. I have attached, the picture of the page, and also what I am look for. Please help. I would really appreciate that.
Best regards,
Sarfraz
Hi there
Hope you are having a good day and thank you for your question 
Let me see what is possible, In order to check your question i need to see your live website, please provide url and i will take a look
Dear Noda,
Thank you so much for your prompt response. The website is www.rasimo.com/mx.
I have attached css and html files as well for your convenience.
Best regards,
Sarfraz
hi
Try this css please:
.featured-wrap ul li .featured-content .featured-img {
width: 100%;
}
.featured-wrap ul li .featured-content .featured-info {
width: 100%;
}
Dear Noda,
I tried this. No effect. The following lines are copied from the updated styles.css files. May be somewhere else, it is being over written.
.featured-wrap ul li .featured-content .featured-info{
width:100%;
/padding:20px;/
}
.featured-wrap ul li .featured-content .featured-img{
width:100%;
/* position:relative; */
}
Best regards,
Sarfraz
Sorry but the code is not added
Thank you Noda! It worked. Please see the picture attached. /www.rasimo.com/martxa. I am very close to what I wanted. Now the objective is to make the blue rectangle very slim (just to hold one line) and picture half the size in breadth-wise. It is showing twice.
Once again, thank you so much.
Best regards,
Sarfraz
Hello there,
I hope you are doing well today.
Could you please check the site? As the CSS is not loading properly.
Best Regards,
Support
Hello! The site is www.rasimo.com/martxa.
It is loading fine now. Sorry for the inconvenience.
Best regards,
Sarfraz
Hello Experts!
I modified the width as shown below and was able of reduce the width to my desire. But could not find a way to reduce the height of the blue rectangle below the picture.
The website is: www.rasimo.com/martxa
.featured-wrap ul li .featured-content{
float:right;
width:15%; /*43 % originally */. <--------------
background:#0552b1;
position:relative;
transition:all .3s;
-webkit-transition:all .3s;
-moz-transition:all .3s;
border-radius:5px;
}
Please help.
Best regards,
Sarfraz
Hi there,
Thanks for writing back.
In that case, could you try out the following CSS code:
.featured-wrap ul li:nth-child(odd) .featured-content .featured-info {
height: 57px !important;
}
.featured-wrap ul li:nth-child(even) .featured-content .featured-info {
height: 57px !important;
}
I hope this helps.
Best Regards,
Support.
Dear Support Friend!
Excellent, it worked great. Now I am just an inch away from exactly what I thought. Now all is perfect, only the boxes with picture and info are far from the vertical line with. Could you please advise how to bring them closer to the vertical line. I have demonstrated that in the attached picture below.
You guys are great and provide world class customer support.
Thank you so much,
Sarfraz
Hi there,
Thanks for writing back.
In that case, could you try out the following CSS code:
.featured-wrap ul li:nth-child(even) .featured-content {
float: left;
margin-left: 20%;
}
.featured-wrap ul li .featured-content {
float: right;
margin-right: 20%;
}
I hope this helps.
Best Regards,
Support.
Thank you so much Support Friend.
I got it exactly I wanted, Your support was great!
The whole objective of this exercise was to make the content slimmer such that it would show up on the smart phone, iPhone for example. It shows up nice on the desktop, but it does not show at all on the smart phone.
Any way, we can do something to it so that it shows up on the smart phone as well?
The url is www.rasimo.com/martxa
Cheers,
Sarfraz
Hi there,
Thanks for keeping in touch.
As for the featured area display on mobile, could you try out the following CSS code:
@media only screen and (max-width: 767px){
.featured-area {
display: block !important;
}
}
I hope this helps.
Best Regards,
Support.
Dear Support team,
I need you add additional Call to Action button, which are already part of the design, but need to place at additional places. In the attached document, I have two pictures, one for the current page, and the other for the desired page. I am attaching HTML and CSS code for your convenience. Please help.
The website is /www.rasimo.com/martxa.
Cheers,
Sarfraz
hi Sarfraz
Sorry but i cant view word document, please attach a .jpg file,
and if current ticket is already resolved please open new one
Thank you Noda.
I am opening a new ticket.
Thanks,
Sarfraz
Hello there,
I am glad the solution worked for you.
Please feel free to contact us again in the future regarding any other issues.
Best Regards,
Support