use multiple fonts in image with text section

Solved
Highlighted
Tourist
6 0 3

Hi I want to use 2 different font types on the home page in an image with text section, to highlight some text. Also i want to add an image in between 2 paragraphs of text.

 

How can I do this?

1 Like
Highlighted
Shopify Partner
5803 849 1944

Hello, @pvdkrogt 

Welcome to the Shopify community!
Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like
Highlighted
Tourist
6 0 3

Thanks, https://roasmkt.myshopify.com/

pw 1234

the first part is a section with image and text. next to it, below an image of what I am trying to achieve, image on 1 side and text with different fonts to the right and an image placed between the paragraphs

I guess I can do it using custom html, but is there any way easier?

1 Like
Highlighted
Shopify Partner
5803 849 1944

@pvdkrogt 

Thanks for Details.

It can be done by doing some code customization. please send me a personal message and we can discuss what you'd like

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
Tourist
6 0 3

I have created a new page and added a custom content section so I can add Images and also code

 

Screen Shot 2020-07-11 at 17.12.14.png

I am struggling a bit with placing text centered over the left image, i am using the following code to do so

<style>
.container {
  position: relative;
  text-align: center;
  color: white;
}

.centered {
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-60%, -50%);
}
</style>

<div class="container">
  <img src="https://cdn.shopify.com/s/files/1/....." alt="" style="width:100%;">
  <div class="centered">
<img src="https://cdn.shopify.com/s/files/1/....." alt="" style="width:20%;"><br>
<span style="font-size: 14pt">
Buscamos transformar la industria de las golosinas y snack, queremos tomar esas cosas que te hacen mal y hacer que te hagan bien.
<br><br>
Desde ahora, las golosinas y snack no serán más chatarra.</span></div>
</div>

 

0 Likes
Highlighted
Shopify Partner
5803 849 1944

@pvdkrogt 

Thanks for update

can you please explain what do you want exactly for this section?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
Tourist
6 0 3

Hi, I am trying to add some text (about us) with some design, that is why I am trying to put text over an image

But on mobile everything gets all over the place

 

 

0 Likes
Highlighted
Shopify Partner
5803 849 1944

@pvdkrogt 

Thanks for update sorry but i can't see this section.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
Tourist
6 0 3

I have uploaded it to the website, it works well on widescreen but phone it gets all messed up

1 Like
Highlighted
Shopify Partner
5803 849 1944

This is an accepted solution.

@pvdkrogt 

Thanks for the update.

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

@media only screen and (max-width: 749px) {
.custom__item.small--one-half {
    -webkit-flex: 1 0 100%;
    -moz-flex: 1 0 100%;
    -ms-flex: 1 0 100%;
    flex: 1 0 100%;
}
}

 

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like