Can CataBlog be made responsive

Hi Bob Reeves, I see what you mean. It makes perfect sense, the width on a mobile device like a mobile phone is smaller as you already know. Now having the image with text on the side, the plugin plus the theme will try it’s best to adjust the width to fit on the mobile phone.

You might have to play around with the wrapper. The one around the div containers.

I also notice that you have the following

.catablog-description {
    margin: 0 0 0 190px;
}

190px should be changed to a percentage. This will require some test for you to achieve what you want on a mobile device smaller than a tablet.

You could also try to have the description below the image rather than have it on the right hand side.

Regards

@ Bob Reeves – Did you ever find a solution to making Catablog responsive?

Hi @ddach69 – unfortunately no, I am presently looking at other alternatives, however I would prefer to use Catablog.

Hi @bob reeves try the following…..

.catablog-row {
height: auto !important;
min-height: 300px;
width: 100%; <—–this is what you need to change
}

//////////////////////////////////

.catablog-images-column {
width: 25%; <—–this is what you need to change
}

///////////////////////////////////

maybe

.catablog-image {
width: 25%; <—–this is what you need to change
}

////////////////////////////////

maybe

.catablog-row .catablog-images-column .catablog-image img {
float: none;
max-height: none;
max-width: 100%; <—–this is what you need to change
min-height: 0;
min-width: 0;
}

///////////////////////////////

.catablog-description {
margin: 0 0 0 25%; <—–this is what you need to change
}

///////////////////////////////

.catablog-title {
margin: 0 0 0 25% !important; <—–this is what you need to change
}

////////////////////////////////////

The above has a percentage value. In your website you will have pixel value. Change them to a percentage just like I have done above.

Let me know if that helps you.

Remember to play around with the percentage value.

Regards

Hi @mbrsolution,

Firstly thanks for your help.

I have placed your modified css into the custom css styles. It has made changes, however the text to the right of the image now disappears behind the image when you change the browser width.

You can view the page here,
https://www.countryimage.co.uk/special-offers/

Hi @bob reeves, change the following…

.catablog-row .catablog-images-column .catablog-image img {
    float: none;
    max-height: none;
    max-width: none;
    min-height: 0;
    min-width: 0;
}

Change the following max-width: 100%;.

See if that works better.

For some reason you did not make that change as I mentioned above?

Regards

Hi @mbrsolution,

Once again thanks for your response.

I had a typo, no full stop in front of catablog-row, sorry about that.

It now renders much better, but as you reduce the width the whitespace between the image and the text on some of the products disappears, can this be rectified.

Hi @bob reeves can you share one of the products that is causing this problem?

Hi @mbrsolution,

Duravit (Top Product)
Neff Warming Drawer (second product)
Painted Kitchen (ninth product)
Duravit Fogo Consule (tenth product)

I have just noticed that the error only occurs on landscape images, not on portrait.

Hi @bob reeves that happens because the images you mentioned above are wider than the images which appear correctly in landscape view.

Hi mbrsolution,

I have checked the images all originals have a width of 280px.

I have also tried playing about with the thumbnail size in Catablog, then re-rendering, it does not seem to make any difference. The landscape images seem to always look wider than the portrait images, even though they are the same width size.

Hi bob reeves, those images have a huge white border or frame on the left and right side. That is why they appear to be the same width and the images that you say have an error.

When you view those images in a mobile phone in landscape view; the text appears to be separated. But in actual fact the text is touching the edge of the image. However because of the huge border or frame it gives you the impression that it isn’t.

Regards

Hi mbrsolution,

I do not have any borders or frames on any images.

I assume that Catablog is putting a frame or border on the images, any ideas.

Hi @bob reeves I downloaded two of your images

• Duravit Architech hand rinse basin
• Aqata Walk in

When I look at the two images side by side I see a large white area on the left and right of Aqata Walk in image. That is what I was referring too above. Catablog does not add that white area to any images because that can only be done using some software.

Regards

Hi @mbrsolution,

I have managed to get the images working as they should, the rogue image was the warming drawer.

Thank you very much for your help in resolving this situation, your input was invaluable.