Hi there,
I have two issues with my site currently.
If you look at my test site here.
http://www.vitalstrengthblog.com.au/webdev/how-to-get-abs-top-6-ab-exercise-mistakes/
1) I have inserted small number images for each point. They look fine on desktop, but when viewed on mobile, they expand and fill the screen. I tried modal on and off, but I can’t seem to fix this. My site has so many if these images and I need a easy solution to lock these images to size. Is there a solution ?
2) I want use the default header style (logo + ad) + menu, as I want the mobile version of the logo to appear on mobile devices. But I need to push down the header space, so you can see my background ad. If I use a transparent image it doest work, if I use an image bigger than 100 px in height it pushes the page content area down or it doesn’t appear at all and the header alignment fix is not doing anything (in theme panel). If I use header style 3, with a transparent image of 240px (perfect height i need) it works, but i get massive clickable area on mobile devices that goes back to home page URL (not good) and i lose the mobile logo on the banner.
I have tried your custom css for inserting a background image in the boxed layout, in theme panel, but that doesn’t do anything with linking my 240px height x 2px wide transparent png. Please note I don’t want a logo on desktop, I need transparent space, bigger than 100px high using style 1.
Thanks for your help.
Hi,
1. Please use this css: http://screencast.com/t/5EenmywC
@media (max-width: 500px) {
.td-grid-wrap .post p b img {
float: left !important;
margin-right: 23px !important;
margin-top: 6px !important;
margin-bottom: 6px !important;
max-width: 50px !important;
width: auto !important;
}
}2. You can try this css, this how it will look on desktop and tablets: http://screencast.com/t/gDgnS2jHD3
This is how it will look on mobile: http://screencast.com/t/j9RW2TjT4G
This is the css:
.td-header-bg {
height: 240px;
}
@media screen and (max-width: 767px) {
.td-header-bg {
height: auto !important;
}
}Hope this helps!
Thanks
Hey Lucian,
Thanks for the fix. This worked in both instances, but number 1 issue, still occurs on some posts and not others..
Works fine on mobile:
<…http://www.vitalstrengthblog.com.au/webdev/how-to-get-abs-top-6-ab-exercise-mistakes/.…>
Doesn’t look right on mobile:
<…www.vitalstrengthblog.com.au/webdev/macronutrient-ratios-muscle-building-diet/..>
<…www.vitalstrengthblog.com.au/webdev/3-male-body-types-workout-diet-muscle/..>
<…www.vitalstrengthblog.com.au/webdev/breakfast-smoothie-recipe-apple-cinnamon…>
Plus more…
Thanks 🙂
Hi,
Please use the css like this: http://screencast.com/t/6tMtVC0xSi
@media (max-width: 500px) {
.post .td-post-text-content .alignleft {
float: left !important;
margin-right: 23px !important;
margin-top: 6px !important;
margin-bottom: 6px !important;
max-width: 50px !important;
width: auto !important;
}
}
While checking your site also noticed that your background image isn’t showing: http://screencast.com/t/zbNiN33JH7Zz and noticed that this happens only on pages, on post pages looks fine. If you want you can use this css to add the background on other pages also: http://screencast.com/t/37IlLC7JR
.page {
background-color: #ffffff;
background-image: url('http://www.vitalstrengthblog.com.au/webdev/wp-content/uploads/2014/10/Ripped-Background-Hi-Res-C2.jpg');
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
}
Thanks
Hi,
This fixes the small number image problems but it then means that other images I place in the content area get reduced on mobile, when I don’t want them to. Ie advertisements that should fill a mobile screen width (i.e. 320px, get reduced to really small).
I need to use image alignment so the desktop version looks full of content. But it looks like the css fixes just messes with these additional images.
example:
<…http://www.vitalstrengthblog.com.au/webdev/best-shoulder-workout/…>
Thanks
Hi Lucian,
I have tried to create a image css class with your code to apply it to EACH image in the image options “image css class), as an alternative option. I don’t really want this as a fix as there is over 200 instances of this button across the site, but I’m not sure if I’m doing it wrong or is there another way. I need the number images to stay fixed and everything else to get handled by the device.
The problem seems to becoming from the alignment to the left, as when I apply no alignment the image works fine, but I can’t wrap the text.
Thanks
Hi,
This issue comes from the .alignleft css class which targets the images which have that class assigned and at 500px maximum width screens sets the width and also the maximum width to 100%
The best solution would be to overwrite that and having a new class added just to the numbers images but I can see an easy way to do that so a solution for this and you will need custom work for this.
The best solution would be to remove the css set for the align right and left images at 500px width from the style.css file, like this: http://screencast.com/t/STTFMQlM
Another solution would be to align to the left only the number images an for the other post images use align right option or center or none as the .alignleft class is added just to the images set to align to the left and use the css I gave in the previous post which will affect only the images aligned to the left which means only the numbers images.
Hope this helps!
Thanks
Hi Lucian,
Thanks for the detailed email. I tried all your options.
I am going to use the centre align and right align combination with your code to get around this.
While this is not perfect its still a good work around 🙂
Thanks for a great theme! Vye for now 😉
Glad I could help!
Thanks for the message!
