Docs

[Hello]

Hi,
My photos and text created in WordPress move out of place when I zoom into the page using the ctl+ function.

They get cropped or move to different parts of the page which isn’t good for user experience.

It is because they aren’t wrapped? Is there responsive code missing? I’m concerned especially on mobile what it will look like.

I have attached screenshots what the page looks like zoomed out, of the top, middle and bottom when the zoom is at 110% and beyond.

Please have a look and help.

[Hello]

This reply has been marked as private.

[Christian]

Hey there,

The images respond correctly on my end. The problem with your text is that you manually separated them with spaces or  . You must put each text (Men and Women) inside a column.

Thanks.

[Hello]

Hi,
Thank you for the reply. So can I just manually delete the spaces?

Is plug in like Advanced WP Columns suitable?

https://wordpress.org/plugins/advanced-wp-columns/

But is says it’s only compatible with 4.4.5. Mine is 4.6.1 I think. So it won’t work?

Or what other method could I use? Could you help edit it?

Many thanks,

[Christian]

Yes, please remove the spaces. You can use Cornerstone for your WooCommerce product description so you can structure your content properly without coding. Just enable Products post type in Cornerstone > Settings (see attachment).

Thanks.

[Hello]

Hi,
But Cornerstone can’t be used in Shop page as it is an archive page?

So i would add Men and Women as Custom Headlines? These would be columns under the photos?

I need to hyperlink them as well.

Then how do I add/save to Shop page?

Thank you.

[Christian]

I see. In this case, you will need to use shortcodes instead. To setup a row, please see http://demo.theme.co/integrity-1/shortcodes/content-band/. For column, see http://demo.theme.co/integrity-1/shortcodes/columns/. For headline, http://demo.theme.co/integrity-1/shortcodes/custom-headline/. To turn the headline to a link, you need to wrap the text inside the headline shortcode with an anchor tag like:

[custom_headline type="center" level="h2"]<a href="#">Custom Headline</a>[/custom_headline]

Thanks.

[Hello]

Hi,
So for your recommended column i use this? I put the photo link in between “Place your content in here” twice, once for each photo to get the two photos onto columns like it is now?

Will this fix the photo out of alignment pronlem?

[column type=”1/2″] Place your content in here. [/column] [column type=”1/2″ last=”true”] Place your content in here. [/column]

Fir the headline, i replace “Custom Headline” twice with “Men” and “Women”. One for align left and one for align right?

Will this solve the problem of the text being too far away from the photos? How to align?

For the link? I replace “Custom Headline” wirh “Men” and “Women” in the code? One code for each? Where do i put thw codes in the page?

In what order?

Please reply soonest.

[Christian]

Yes that will solve the issue. Please give us access to your WordPress admin and FTP so we could see your current setup.

Thanks.

[Hello]

It was sent already yesterday. Can’t send again.

[Hello]

Hi,
I did this with the code following what you recommended.

[column type=”1/2″] https://trillionpeak.com/wp-content/uploads/2016/11/20160108_145251-edit.jpg [/column] [column type=”1/2″ last=”true”] https://trillionpeak.com/wp-content/uploads/2016/11/20160219_184651-edit.jpg [/column]

And it just shows the photo links on the page.

What is missing?

[Hello]

This reply has been marked as private.

[Rad]

Hi there,

It’s will display as the link because it’s added as a link. If you wish to display it as image, then use <img> tag for your URLs. Example,

[column type="1/2"] <img src="https://trillionpeak.com/wp-content/uploads/2016/11/20160108_145251-edit.jpg"> [/column] [column type="1/2" last="true"] <img src="https://trillionpeak.com/wp-content/uploads/2016/11/20160219_184651-edit.jpg"> [/column]

And make sure to use proper quotations, this is wrong

[column type=”1/2″]

and this is correct

[column type="1/2"]

Or else, it will not work.

Hope this helps.

[Hello]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thank your for the clarifications! By default, custom headline has a default top and bottom margin. To prevent and get rid of the margin, please use the spacing utility classes some thing like this:

[custom_headline class="man" type="left" level="h2" looks_like="h3" accent="true"]Custom Headline[/custom_headline]

To know more about element spacing, please check it out here: https://community.theme.co/kb/element-spacing/

Hope this helps.

[Author]

Posts